M
MLOG
Reactin laiska lataus: Komponenttien koodin jakaminen optimoidun suorituskyvyn saavuttamiseksi | MLOG | MLOG ); } export default ImageGallery;

Ja Image.js-komponentti:


import React from 'react';

const Image = ({ src, alt }) => {
  return {alt};
};

export default Image;

Tässä esimerkissä jokainen kuva on kääritty <Suspense>-komponenttiin, joten latausviesti näytetään jokaiselle kuvalle, kun sitä ladataan. Tämä estää koko sivun estämisen kuvien lataamisen aikana.

Kehittyneet tekniikat ja huomioitavat asiat

1. Virherajat

Laiskaa latausta käytettäessä on tärkeää käsitellä mahdolliset virheet, joita saattaa ilmetä latausprosessin aikana. Virherajoja voidaan käyttää näiden virheiden sieppaamiseen ja varakäyttöliittymän näyttämiseen. Voit luoda virherajakomponentin näin:


import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Päivitä tila, jotta seuraava renderöinti näyttää varakäyttöliittymän.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Voit myös kirjata virheen virheraportointipalveluun
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Voit renderöidä minkä tahansa mukautetun varakäyttöliittymän
      return 
Jotain meni pieleen.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Kääri sitten <Suspense>-komponentti <ErrorBoundary>-elementillä:



  Ladataan...}>

Jos virhe ilmenee MyComponent-komponentin lataamisen aikana, <ErrorBoundary> sieppaa sen ja näyttää varakäyttöliittymän.

2. Palvelinpuolen renderöinti (SSR) ja laiska lataus

Laiskaa latausta voidaan käyttää myös yhdessä palvelinpuolen renderöinnin (SSR) kanssa sovelluksesi alkulatausajan parantamiseksi. Se vaatii kuitenkin jonkin verran lisämäärityksiä. Sinun on varmistettava, että palvelin osaa käsitellä dynaamisia tuonteja oikein ja että laiskasti ladatut komponentit on hydratoitu oikein asiakaspuolella.

Työkalut, kuten Next.js ja Gatsby.js, tarjoavat sisäänrakennetun tuen laiskalle lataukselle ja koodin jakamiselle SSR-ympäristöissä, mikä helpottaa prosessia huomattavasti.

3. Laiskasti ladattujen komponenttien esilataus

Joissakin tapauksissa saatat haluta esiladata laiskasti ladatun komponentin ennen kuin sitä todella tarvitaan. Tämä voi olla hyödyllistä komponenteille, jotka todennäköisesti renderöidään pian, kuten komponenteille, jotka sijaitsevat sivun alaosassa, mutta jotka todennäköisesti vieritetään näkyviin. Voit esiladata komponentin kutsumalla import()-funktiota manuaalisesti:


import('./MyComponent'); // Esilataa MyComponent

Tämä aloittaa komponentin lataamisen taustalla, joten se on käytettävissä nopeammin, kun se todella renderöidään.

4. Dynaamiset tuonnit Webpack Magic Comments -kommenteilla

Webpackin "magic comments" -kommentit tarjoavat tavan mukauttaa luotujen koodiosien nimiä. Tästä voi olla apua sovelluksesi nippurakenteen virheenkorjauksessa ja analysoinnissa. Esimerkiksi:


const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

Tämä luo koodiosan nimeltä "my-component.js" (tai vastaavan) yleisen nimen sijaan.

5. Yleisten sudenkuoppien välttäminen

Todellisia esimerkkejä ja käyttötapauksia

Laiskaa latausta voidaan soveltaa monenlaisiin tilanteisiin React-sovellusten suorituskyvyn parantamiseksi. Tässä muutamia esimerkkejä:

Esimerkki: Kansainvälinen verkkokauppasivusto

Kuvittele verkkokauppasivusto, joka myy tuotteita maailmanlaajuisesti. Eri maissa voi olla eri valuutat, kielet ja tuoteluettelot. Sen sijaan, että lataisit kaiken datan jokaiselle maalle etukäteen, voit ladata käyttäjän sijainnin datan laiskan latauksen avulla vain, kun he vierailevat sivustolla.


const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // Funktio käyttäjän maan määrittämiseksi

  return (
    Ladataan sisältöä alueellesi...}>
      
      
    
  );
}

Johtopäätös

Laiska lataus ja komponenttien koodin jakaminen ovat tehokkaita tekniikoita React-sovellusten suorituskyvyn optimointiin. Lataamalla komponentteja vain silloin, kun niitä tarvitaan, voit vähentää merkittävästi alkulatausaikaa, parantaa käyttökokemusta ja parantaa SEO:tasi. Reactin sisäänrakennetut React.lazy()- ja <Suspense>-komponentit tekevät laiskan latauksen toteuttamisesta helppoa projekteissasi. Hyödynnä näitä tekniikoita rakentaaksesi nopeampia, reagoivampia ja mukaansatempaavampia verkkosovelluksia maailmanlaajuiselle yleisölle.

Muista aina ottaa käyttökokemus huomioon, kun toteutat laiskaa latausta. Tarjoa informatiivisia varakäyttöliittymiä, käsittele mahdolliset virheet sulavasti ja analysoi huolellisesti sovelluksesi suorituskykyä varmistaaksesi, että saavutat halutut tulokset. Älä pelkää kokeilla erilaisia lähestymistapoja ja löytää paras ratkaisu juuri sinun tarpeisiisi.