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

import React, { Suspense } from 'react';

function MyPage() {
  return (
    Laadimine...

Selles näites kuvatakse teade Laadimine..., kuni MyComponent laaditakse. Kui komponent on laaditud, asendab see varu-kasutajaliidese.

3. Praktiline näide: suure pildigalerii laisklaadimine

Vaatleme stsenaariumi, kus teil on suur pildigalerii. Kõigi piltide korraga laadimine võib jõudlust oluliselt mõjutada. Siin on, kuidas saate pilte laisklaadida, kasutades React.lazy() ja <Suspense>:

import React, { Suspense } from 'react';

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

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

  return (
    

      {images.map(image => (
        Pildi laadimine...
}>
          
        
      ))}
    
  );
}

export default ImageGallery;

Ja Image.js komponent:

import React from 'react';

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

export default Image;

Selles näites on iga pilt mähitud <Suspense> komponendiga, nii et iga pildi laadimise ajal kuvatakse laadimisteade. See hoiab ära kogu lehe blokeerimise piltide allalaadimise ajal.

Täpsemad tehnikad ja kaalutlused

1. Veapiirid (Error Boundaries)

Laisklaadimise kasutamisel on oluline käsitleda võimalikke vigu, mis võivad laadimisprotsessi käigus tekkida. Veapiire saab kasutada nende vigade püüdmiseks ja varu-kasutajaliidese kuvamiseks. Saate luua veapiiri komponendi selliselt:

import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // Uuenda olekut, et järgmine renderdus näitaks varu-kasutajaliidest.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Saate vea logida ka veaaruandlusteenusesse
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Saate renderdada mis tahes kohandatud varu-kasutajaliidese
      return 
Midagi läks valesti.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Seejärel mähkige <Suspense> komponent <ErrorBoundary> komponendiga:

  Laadimine...}>
    
  

Kui MyComponent laadimisel tekib viga, püüab <ErrorBoundary> selle kinni ja kuvab varu-kasutajaliidese.

2. Serveripoolne renderdamine (SSR) ja laisklaadimine

Laisklaadimist saab kasutada ka koos serveripoolse renderdamisega (SSR), et parandada teie rakenduse esmast laadimisaega. See nõuab aga täiendavat seadistamist. Peate tagama, et server suudab dünaamilisi importe õigesti käsitleda ja et laisklaaditud komponendid oleksid kliendi poolel korralikult hüdreeritud.

Tööriistad nagu Next.js ja Gatsby.js pakuvad sisseehitatud tuge laisklaadimisele ja koodijagamisele SSR-keskkondades, muutes protsessi palju lihtsamaks.

3. Laisklaaditud komponentide eellaadimine

Mõnel juhul võiksite laisklaaditud komponendi eellaadida enne, kui seda tegelikult vaja on. See võib olla kasulik komponentide puhul, mida tõenäoliselt varsti renderdatakse, näiteks komponendid, mis asuvad lehe nähtavast osast allpool, kuid mis tõenäoliselt keritakse vaatesse. Saate komponendi eellaadida, kutsudes käsitsi välja funktsiooni import():

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

See alustab komponendi laadimist taustal, nii et see on kiiremini kättesaadav, kui seda tegelikult renderdatakse.

4. Dünaamilised impordid Webpacki maagiliste kommentaaridega

Webpacki "maagilised kommentaarid" pakuvad võimalust genereeritud kooditükkide nimede kohandamiseks. See võib olla abiks teie rakenduse paketistruktuuri silumisel ja analüüsimisel. Näiteks:

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

See loob kooditüki nimega "my-component.js" (või sarnase) geneerilise nime asemel.

5. Levinud vigade vältimine

• Liigne tükeldamine: Koodi jagamine liiga paljudeks väikesteks tükkideks võib tegelikult jõudlust vähendada mitme võrgupäringu tegemise lisakoormuse tõttu. Leidke oma rakenduse jaoks sobiv tasakaal.
• Vale Suspense'i paigutus: Veenduge, et teie <Suspense> piirid on hea kasutajakogemuse pakkumiseks sobivalt paigutatud. Vältige võimalusel tervete lehtede mähkimist <Suspense> komponendiga.
• Veapiiride unustamine: Kasutage alati veapiire, et käsitleda laisklaadimise ajal tekkida võivaid vigu.

Reaalse maailma näited ja kasutusjuhud

Laisklaadimist saab rakendada mitmesugustes stsenaariumides Reacti rakenduste jõudluse parandamiseks. Siin on mõned näited:

• E-kaubanduse veebisaidid: Tootepiltide, videote ja üksikasjalike tootekirjelduste laisklaadimine võib oluliselt parandada tootelehtede esmast laadimisaega.
• Blogid ja uudiste veebisaidid: Piltide, manustatud videote ja kommentaaride sektsioonide laisklaadimine võib parandada lugemiskogemust ja vähendada põrkemäära.
• Juhtpaneelid ja halduspaneelid: Keerukate diagrammide, graafikute ja andmetabelite laisklaadimine võib parandada juhtpaneelide ja halduspaneelide reageerimisvõimet.
• Üheleheküljelised rakendused (SPA): Marsruutide ja komponentide laisklaadimine võib vähendada SPA-de esmast laadimisaega ja parandada üldist kasutajakogemust.
• Rahvusvahelised rakendused: Asukohapõhiste ressursside (tekst, pildid jne) laadimine ainult siis, kui neid on kasutaja keele jaoks vaja. Näiteks saksa tõlgete laadimine Saksamaal asuvale kasutajale ja hispaania tõlgete laadimine Hispaanias asuvale kasutajale.

Näide: Rahvusvaheline e-kaubanduse veebisait

Kujutage ette e-kaubanduse veebisaiti, mis müüb tooteid ülemaailmselt. Erinevates riikides võivad olla erinevad valuutad, keeled ja tootekataloogid. Selle asemel, et laadida kohe alguses kõigi riikide andmeid, saate kasutada laisklaadimist, et laadida kasutaja asukohale spetsiifilised andmed alles siis, kui ta saiti külastab.

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

function ECommerceSite() {
  const userCountry = getUserCountry(); // Funktsioon kasutaja riigi määramiseks

  return (
    Sisu laadimine teie piirkonna jaoks...}>
      
      
    
  );
}

Kokkuvõte

Laisklaadimine ja komponentide koodijagamine on võimsad tehnikad Reacti rakenduste jõudluse optimeerimiseks. Laadides komponente ainult siis, kui neid on vaja, saate oluliselt vähendada esmast laadimisaega, parandada kasutajakogemust ja täiustada oma SEO-d. Reacti sisseehitatud React.lazy() ja <Suspense> komponendid muudavad laisklaadimise rakendamise teie projektides lihtsaks. Võtke need tehnikad omaks, et luua kiiremaid, reageerivamaid ja kaasahaaravamaid veebirakendusi ülemaailmsele publikule.

Pidage meeles, et laisklaadimise rakendamisel tuleb alati arvestada kasutajakogemusega. Pakkuge informatiivseid varu-kasutajaliideseid, käsitlege võimalikke vigu sujuvalt ja analüüsige hoolikalt oma rakenduse jõudlust, et tagada soovitud tulemuste saavutamine. Ärge kartke katsetada erinevaid lähenemisviise ja leida oma konkreetsetele vajadustele parim lahendus.