Eesti

Avage oma Reacti rakenduste jaoks kiirem esmane laadimisaeg ja parem jõudlus laisklaadimise ning komponentide koodijagamisega. Õppige praktilisi tehnikaid ja parimaid praktikaid.

Reacti laisklaadimine: komponentide koodijagamine optimeeritud jõudluse saavutamiseks

Tänapäeva kiires digitaalses maailmas on veebilehe jõudlus esmatähtis. Kasutajad ootavad kohest tulemust ning aeglased laadimisajad võivad põhjustada frustratsiooni, hüljatud ostukorve ja negatiivset brändi mainet. Reacti rakenduste puhul on jõudluse optimeerimine sujuva ja kaasahaarava kasutajakogemuse pakkumiseks ülioluline. Üks võimas tehnika selle saavutamiseks on laisklaadimine (lazy loading) koos komponentide koodijagamisega.

Mis on laisklaadimine ja koodijagamine?

Laisklaadimine on tehnika, mille puhul ressursse, nagu pildid, skriptid ja komponendid, laaditakse alles siis, kui neid on vaja, mitte kõiki korraga lehe esmasel laadimisel. See vähendab oluliselt esialgu allalaaditava ja parsitud andmete hulka, mille tulemuseks on kiirem esmane laadimisaeg ja parem tajutav jõudlus.

Koodijagamine on protsess, mille käigus jagatakse rakenduse kood väiksemateks, paremini hallatavateks tükkideks (ehk pakettideks). See võimaldab brauseril alla laadida ainult esmase vaate jaoks vajaliku koodi, lükates muu koodi laadimise edasi, kuni seda tegelikult vajatakse. Laisklaadimine kasutab koodijagamist, et laadida konkreetseid komponente alles siis, kui neid hakatakse renderdama.

Miks kasutada laisklaadimist ja koodijagamist Reactis?

Siin on põhjused, miks peaksite kaaluma laisklaadimise ja koodijagamise lisamist oma Reacti projektidesse:

Kuidas rakendada laisklaadimist Reactis

React pakub sisseehitatud tuge laisklaadimisele, kasutades React.lazy ja Suspense komponente. Siin on samm-sammuline juhend:

1. React.lazy() kasutamine

React.lazy() võimaldab teil komponente dünaamiliselt importida, jagades teie koodi tõhusalt eraldi tükkideks. See võtab argumendiks funktsiooni, mis kutsub välja import(), mis tagastab Promise'i, mis laheneb komponendiks.


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

Selles näites laaditakse MyComponent alles siis, kui seda hakatakse renderdama.

2. Mähkimine <Suspense> komponendiga

Kuna React.lazy() kasutab dünaamilisi importe, mis on asünkroonsed, peate laisklaaditava komponendi mähkima <Suspense> komponendiga. <Suspense> komponent võimaldab teil kuvada varu-kasutajaliidest (nt laadimisikooni), kuni komponenti laaditakse.


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 {alt};
};

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

Reaalse maailma näited ja kasutusjuhud

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

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.