React Lazy: Komponentide laisa laadimise valdamine optimeeritud jõudluse saavutamiseks

Tänapäeva veebiarenduse maastikul on jõudlus esmatähtis. Kasutajad ootavad välkkiireid laadimisaegu ja sujuvat sirvimiskogemust. React, populaarne JavaScripti teek kasutajaliideste loomiseks, pakub mitmeid tööriistu jõudluse optimeerimiseks. Üks tõhusamaid neist on React.lazy – funktsioon, mis võimaldab komponentide laiska laadimist. See blogipostitus uurib React.lazy funktsionaalsust üksikasjalikult, käsitledes selle eeliseid, rakendamist ja parimaid tavasid.

Mis on komponentide laisk laadimine?

Komponentide laisk laadimine, tuntud ka kui koodi tükeldamine (code splitting), on tehnika, mis lükkab teatud rakenduse osade laadimise edasi, kuni neid tegelikult vaja läheb. Selle asemel, et laadida kõik komponendid kohe alguses, laaditakse ainult esialgu vajalikud komponendid ning ülejäänud hangitakse asünkroonselt, kui kasutaja nendega suhtleb. See vähendab dramaatiliselt esmast laadimisaega, parandades seeläbi kasutajakogemust.

Kujutage ette suurt e-kaubanduse veebisaiti, millel on arvukalt tootelehti, kategooriaid ja interaktiivseid elemente. Kõigi nende komponentide samaaegne laadimine tooks kaasa märkimisväärse esialgse laadimisaja, mis võib kasutajaid frustreerida ja viia kõrgema põrkemäärani. Komponentide laisa laadimise abil saab veebisait esialgu laadida ainult avalehe jaoks vajalikud põhikomponendid ja seejärel laadida nõudmisel teisi komponente, nagu tootelehed või kategooriafiltrid.

React Lazy eelised

React.lazy kasutamine pakub mitmeid olulisi eeliseid:

• Parem esmane laadimisaeg: Mittekriitiliste komponentide laadimise edasilükkamisega vähendab React.lazy oluliselt esialgse paketi (bundle) suurust, mis viib kiiremate laadimisaegade ja parema kasutajakogemuseni.
• Väiksem paketi suurus: Koodi tükeldamine jagab teie rakenduse väiksemateks osadeks, vähendades üldist paketi suurust ja parandades vahemällu salvestamise tõhusust.
• Parem kasutajakogemus: Kiiremad laadimisajad tähendavad sujuvamat ja reageerimisvõimelisemat kasutajakogemust, mis viib suurema kasutajate kaasatuse ja rahuloluni.
• Optimeeritud ressursside kasutus: Laisk laadimine tagab, et ressursse laaditakse ainult siis, kui neid tegelikult vaja on, vähendades tarbetut ribalaiuse tarbimist ja parandades serveri jõudlust.

React.lazy ja Suspense tutvustus

React.lazy on funktsioon, mis teeb Reacti komponentide laisa laadimise lihtsaks. See võtab argumendiks funktsiooni, mis peab kutsuma dünaamilise import(). See import()-kutse tagastab Promise'i, mis laheneb mooduliks, mille default-eksport sisaldab Reacti komponenti.

Kuid komponentide laisk laadimine toob kaasa uue väljakutse: mida kuvada, kuni komponenti laaditakse? Siin tuleb appi React.Suspense. Suspense on Reacti komponent, mis võimaldab teil oma komponendipuu osa renderdamise "peatada", kuni teatud tingimus on täidetud, näiteks laisalt laaditav komponent on täielikult laetud. Saate pakkuda varu-kasutajaliidest (fallback UI), näiteks laadimisikooni või kohatäitja, mida kuvatakse komponendi laadimise ajal.

Kuidas React Lazy't rakendada

Siin on samm-sammuline juhend React.lazy rakendamiseks:

1. Importige React.lazy ja React.Suspense:

               import React, { lazy, Suspense } from 'react';
               
   
                 
                   Copy
                 
               
             

2. Kasutage React.lazy't laisalt laaditava komponendi loomiseks:

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

   Asendage ./MyComponent oma komponendi faili teega. Funktsioon `import()` tagastab Promise'i, mis laheneb komponendiga.

3. Mähkige laisalt laaditav komponent React.Suspense'i sisse:

               function MyPage() {
     return (
       <Suspense fallback={<div>Laadimine...</div>}>
         <MyComponent />
       </Suspense>
     );
   }
   
               
   
                 
                   Copy
                 
               
             

   Suspense'i fallback-prop määrab kasutajaliidese, mida kuvatakse komponendi laadimise ajal. See võib olla mis tahes kehtiv Reacti element.

4. Renderdage komponent:

               ReactDOM.render(<MyPage />, document.getElementById('root'));
               
   
                 
                   Copy
                 
               
             

Näide: Profiili komponendi laisk laadimine

Vaatleme näidet, kus soovite laisalt laadida Profile komponenti:

1. Looge Profile komponent (Profile.js):

               // Profile.js
   import React from 'react';
   
   function Profile() {
     return (
       <div>
         <h2>Kasutajaprofiil</h2>
         <p>Nimi: John Doe</p>
         <p>Asukoht: New York</p>
       </div>
     );
   }
   
   export default Profile;
               
   
                 
                   Copy
                 
               
             

2. Laadige Profile komponent oma põhikomponendis laisalt:

               // App.js
   import React, { lazy, Suspense } from 'react';
   
   const Profile = lazy(() => import('./Profile'));
   
   function App() {
     return (
       <div>
         <h1>Minu rakendus</h1>
         <Suspense fallback={<div>Profiili laadimine...</div>}>
           <Profile />
         </Suspense>
       </div>
     );
   }
   
   export default App;
               
   
                 
                   Copy
                 
               
             

Selles näites laaditakse Profile komponent ainult siis, kui see renderdatakse Suspense'i piirides. Komponendi laadimise ajal kuvatakse teade "Profiili laadimine...".

Täpsem kasutus ja kaalutlused

Vigade käsitlemine

React.lazy kasutamisel on oluline käsitleda võimalikke vigu, mis võivad laadimisprotsessi käigus tekkida. Suspense komponent toetab ka veakäsitlust veapiiriga (Error Boundary). Saate luua kohandatud veapiiri komponendi ja mähkida Suspense'i komponendi selle sisse.

            // ErrorBoundary.js
import React from 'react';

class ErrorBoundary extends React.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 vearaportiteenusesse
    console.error(error, errorInfo);
  }

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

    return this.props.children; 
  }
}

export default ErrorBoundary;
            

              
                Copy
              
            
          

            // App.js
import React, { lazy, Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

const Profile = lazy(() => import('./Profile'));

function App() {
  return (
    <div>
      <h1>Minu rakendus</h1>
      <ErrorBoundary>
        <Suspense fallback={<div>Profiili laadimine...</div>}>
          <Profile />
        </Suspense>
      </ErrorBoundary>
    </div>
  );
}

export default App;
            

              
                Copy
              
            
          

Serveripoolne renderdamine (SSR)

React.lazy on mõeldud kliendipoolseks renderdamiseks. Kui kasutate serveripoolset renderdamist (SSR), peate serveris laisa laadimise haldamiseks kasutama teeki nagu loadable-components. See teek pakub serveripoolset tuge koodi tükeldamiseks ja võimaldab teil esialgse serveripoolse renderdamise ajal vajalikud komponendid eellaadida.

Dünaamilised importimised ja Webpack

React.lazy tugineb dünaamilistele importimistele, mida toetavad kaasaegsed JavaScripti paketihaldurid (bundler) nagu Webpack, Parcel ja Rollup. Need paketihaldurid tükeldavad teie koodi automaatselt eraldi osadeks, võimaldades teil komponente nõudmisel laadida.

Veenduge, et teie Webpacki konfiguratsioon on dünaamiliste importimiste käsitlemiseks õigesti seadistatud. Tavaliselt peate konfigureerima `output.chunkFilename`, et määrata, kuidas genereeritud osad (chunks) tuleks nimetada.

Õigete komponentide valimine laisaks laadimiseks

Kõik komponendid ei sobi laisaks laadimiseks. Komponendid, mis on esialgse renderdamise jaoks kriitilised või mida kasutatakse sageli, tuleks laadida innukalt, et vältida tarbetuid laadimisviivitusi. Head kandidaadid laisaks laadimiseks on:

• Komponendid, mida renderdatakse ainult teatud tingimustel: Näiteks modaalaken, mida kuvatakse ainult siis, kui nupule klõpsatakse.
• Komponendid, mis asuvad allpool ekraani nähtavat osa (below the fold): Komponente, mis ei ole esialgses vaateaknas nähtavad, saab laadida laisalt, et parandada esmast laadimisaega.
• Suured ja keerulise loogikaga komponendid: Nende komponentide laisk laadimine võib oluliselt vähendada esialgse paketi suurust.

React Lazy parimad tavad

Siin on mõned parimad tavad, mida React.lazy kasutamisel järgida:

• Kasutage tähendusrikast varu-kasutajaliidest: Varu-kasutajaliides peaks andma kasutajale selget tagasisidet, et komponent laeb. Vältige üldiste laadimisikoonide kasutamist; selle asemel pakkuge kontekstipõhist teavet. Näiteks kui laadite laisalt pilti, kuvage laadimisindikaatoriga kohatäitja pilt.
• Optimeerige oma paketi suurust: Isegi laisa laadimise puhul on oluline optimeerida oma paketi suurust, kasutades tehnikaid nagu puuraputamine (tree shaking), koodi minimeerimine ja piltide optimeerimine.
• Jälgige jõudlust: Kasutage brauseri arendaja tööriistu oma rakenduse jõudluse jälgimiseks ja tuvastage valdkonnad, kus laiska laadimist saab veelgi optimeerida.
• Testige põhjalikult: Testige oma rakendust põhjalikult, et tagada laisa laadimise korrektne toimimine ja ootamatute vigade puudumine.
• Arvestage kasutajakogemusega: Kuigi laisk laadimine parandab esmast laadimisaega, pöörake tähelepanu tajutavale jõudlusele. Optimeerige laadimiskogemust tehnikatega nagu eellaadimine ja progressiivne laadimine.

Näited reaalsest elust

React.lazy't saab kasutada väga erinevates rakendustes. Siin on mõned näited reaalsest elust:

• E-kaubanduse veebisaidid: Laadige laisalt tootepilte, kirjeldusi ja arvustusi, et parandada esmast laadimisaega ja täiustada ostukogemust.
• Ühelehelised rakendused (SPA): Laadige laisalt rakenduse erinevaid marsruute või jaotisi, et vähendada esialgse paketi suurust ja parandada navigeerimisjõudlust.
• Sisurohked veebisaidid: Laadige laisalt pilte, videoid ja muud meediasisu, et parandada esmast laadimisaega ja vähendada ribalaiuse tarbimist.
• Juhtpaneelide rakendused: Laadige laisalt keerulisi diagramme, graafikuid ja andmetabeleid, et parandada esmast laadimisaega ja täiustada kasutajakogemust.
• Rahvusvahelistatud rakendused: Laadige laisalt asukohapõhiseid ressursse ja komponente, et vähendada esialgse paketi suurust ja parandada jõudlust eri piirkondade kasutajate jaoks. Näiteks laadige keelepakette ainult siis, kui kasutaja valib kindla keele.

Alternatiivid React.lazy'le

Kuigi React.lazy on võimas tööriist, on koodi tükeldamiseks ja laisaks laadimiseks ka teisi alternatiive:

• Loadable Components: Kõrgema järgu komponent (higher-order component) koodi tükeldamiseks Reactis, mis toetab serveripoolset renderdamist ja täpsemaid funktsioone.
• React Loadable: Veel üks teek, mis pakub sarnast funktsionaalsust nagu Loadable Components, pakkudes rohkem kontrolli laadimisprotsessi üle. Kuigi seda enam aktiivselt ei hooldata, tasub seda mainida kui Loadable Componentsi eelkäijat.
• @loadable/component: React Loadable'i järeltulija. Selle eesmärk on pakkuda lihtsat, kuid võimsat API-d komponentide tasemel koodi tükeldamiseks Reactis.

Kokkuvõte

React.lazy on võimas tööriist teie Reacti rakenduste jõudluse optimeerimiseks. Komponente laisalt laadides saate oluliselt vähendada esmast laadimisaega, parandada kasutajakogemust ja optimeerida ressursside kasutamist. Järgides selles blogipostituses kirjeldatud parimaid tavasid, saate tõhusalt rakendada React.lazy funktsionaalsust ja luua suure jõudlusega Reacti rakendusi, mis pakuvad sujuvat kasutajakogemust.

Võtke omaks komponentide laisk laadimine ja avage oma Reacti projektide jaoks uus jõudluse tase. Teie kasutajad tänavad teid selle eest!