const MyComponent = React.lazy(() => import('./MyComponent'));

import React, { Suspense } from 'react';

function MyPage() {
  return (
    Ladataan...

Tässä esimerkissä Ladataan... -viesti näytetään, kun MyComponent ladataan. Kun komponentti on ladattu, se korvaa varakäyttöliittymän.

3. Käytännön esimerkki: Suuren kuvagallerian laiska lataaminen

Harkitkaamme tilannetta, jossa sinulla on suuri kuvagalleria. Kaikkien kuvien lataaminen kerralla voi vaikuttaa merkittävästi suorituskykyyn. Näin voit ladata kuvat laiskasti käyttämällä React.lazy()- ja <Suspense>-komponentteja:

import React, { Suspense } from 'react';

const LazyImage = React.lazy(() => import('./Image'));

function ImageGallery() {
  const images = [
    { id: 1, src: 'image1.jpg', alt: 'Kuva 1' },
    { id: 2, src: 'image2.jpg', alt: 'Kuva 2' },
    { id: 3, src: 'image3.jpg', alt: 'Kuva 3' },
    // ... lisää kuvia
  ];

  return (
    

      {images.map(image => (
        Ladataan kuvaa...
}>
          
        
      ))}
    
  );
}

export default ImageGallery;

Ja Image.js-komponentti:

import React from 'react';

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

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

• Liiallinen jakaminen: Koodin jakaminen liian moneen pieneen osaan voi todellisuudessa heikentää suorituskykyä useiden verkkopyyntöjen aiheuttaman lisäkuorman vuoksi. Etsi tasapaino, joka toimii sovelluksellesi.
• Väärä Suspense-sijoittelu: Varmista, että <Suspense>-rajasi on sijoitettu asianmukaisesti hyvän käyttökokemuksen tarjoamiseksi. Vältä koko sivun käärimistä <Suspense>-elementtiin, jos mahdollista.
• Virherajojen unohtaminen: Käytä aina virherajoja mahdollisten virheiden käsittelemiseen laiskan latauksen aikana.

Todellisia esimerkkejä ja käyttötapauksia

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

• Verkkokauppasivustot: Tuotekuvien, videoiden ja yksityiskohtaisten tuotekuvausten laiska lataus voi parantaa merkittävästi tuotesivujen alkulatausaikaa.
• Blogit ja uutissivustot: Kuvien, upotettujen videoiden ja kommenttiosioiden laiska lataus voi parantaa lukukokemusta ja vähentää poistumisprosentteja.
• Hallintapaneelit: Monimutkaisten kaavioiden, graafien ja datataulukoiden laiska lataus voi parantaa hallintapaneelien reagoivuutta.
• Yksisivuiset sovellukset (SPA): Reittien ja komponenttien laiska lataus voi vähentää SPA:n alkulatausaikaa ja parantaa yleistä käyttökokemusta.
• Kansainvälistetyt sovellukset: Kielikohtaisten resurssien (teksti, kuvat jne.) lataaminen vain silloin, kun niitä tarvitaan käyttäjän kielen mukaan. Esimerkiksi saksankielisten käännösten lataaminen Saksassa olevalle käyttäjälle ja espanjankielisten käännösten lataaminen Espanjassa olevalle käyttäjälle.

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.