Reactiga laisa laadimise juhend

Sissejuhatus

Suurte Reacti rakenduste arendamisel kasutame tavaliselt palju pilte ja videoid, installime kolmanda osapoole pakette/teeke, teeme API-kõnesid ja teeme palju muid asju. See pikendab loomulikult meie rakenduse laadimiseks kuluvat aega ja tulemuseks on tohutu komplekti suurus, mis põhjustab kehva kasutuskogemuse. See on koht laisk laadimine tuleb paika. See võimaldab meil sisu laadida täpselt õigeks ajaks, vahetult enne selle kuvamist rakenduses.

Saame vältida sisu eellaadimist, kui see on veel vaateväljas, ja koondada kõik ressursid vaates olevale sisule.

Selles juhendis vaatleme, kuidas seda kasutada React.lazy() ja React.Suspense laiska laadimise ja koodi jagamise funktsioonide juurutamiseks, mis võimaldab meil koodi tükeldamisega hakkama saada ilma täiendavaid teeke installimata.

Mis on laisk laadimine?

Kui käivitame Reacti veebirakenduse, komplekteerib see tavaliselt kogu rakenduse korraga, laadides meie jaoks kõik, sealhulgas kogu veebirakenduse lehed, pildid, sisu ja palju muud, mille tulemuseks võib olla aeglane laadimisaeg ja üldine halb jõudlus, olenevalt sisu suurus ja interneti ribalaius sel ajal.

Laulev laadimine võimaldab laadida konkreetseid komponente ainult siis, kui neid vajatakse. Tavaliselt me ​​ka esineme koodi tükeldamine loogilisteks komponentideks, mida saab ka sisuga laisk laadida.

Näiteks kui meil on armatuurlaua leht, millel kuvatakse klõpsamisel palju teavet erinevatest allikatest, on alati kõige parem hoida need komponendid ja lehed laisklaadituna, nii et need laaditakse ainult siis, kui kasutaja seda vajab või nõuab.

Märge: Protsessi, mille käigus sülitatakse suur koodikimp mitmeks kimpudeks, mida saab dünaamiliselt laadida, eesmärgiga vältida liiga suurte kimpudega seotud jõudlusprobleeme, nimetatakse koodi jagamine. See saavutatakse meie rakenduses koodi hulka vähendamata.

Kokkuvõttes võimaldab laisk laadimine meil komponente või elemente nõudmisel renderdada, muutes meie rakenduse tõhusamaks ja pakkudes paremat kasutuskogemust.

Märge: Ühelehelised rakendused (SPA-d) on loodud sisaldama kõiki lehti ja sisu ühel dokumendil/leheküljel. Seetõttu tuleb SPA-de arendamisel eriti kasuks laisk laadimine.

Kuidas Reactis laiska laadimist rakendada

Siiani oleme näinud, mis on laisk laadimine ja miks on seda oluline rakendada. Nüüd vaatame, kuidas saaksime seda oma Reacti rakendustes rakendada, kasutades kahte Reacti funktsiooni, mis muudavad koodi jagamise ja laisa laadimise hõlpsasti rakendatavaks – React.laiszy() ja Reageerige. Põnevus.

React.lazy() on funktsioon, mis võimaldab meil renderdada dünaamiline import samamoodi nagu tavalised komponendid. Dünaamilise impordi kasutamine koos React.lazy() võimaldab meil importida komponendi vahetult enne selle kuvamist. Oluline on märkida, et React.lazy() aktsepteerib funktsiooni argumendina – see funktsioon peab kutsuma dünaamilist import() selle kehas.

React.Suspense võimaldab meil määrata varuvariandi toetama mis võtab sisse kohahoidja sisu, mida kasutataks a laadimise indikaator samal ajal kui kõik laisad komponendid laetakse.

Alustuseks uurime, kuidas saaksime oma imporditud komponentides laiska laadimist rakendada ja kuidas saaksime seda oma marsruutidel rakendada nii, et lehti ei laaditaks enne, kui me neile navigeerime.

Alustamine

Oletame, et meil on rakendus React ja me importisime selle About komponent sisse Home:

import AboutUs from './About';

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};

export default Home;

Nüüd saame rakendada laiska laadimist, kasutades ära React.lazy():

import React from 'react';


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

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};
export default Home;

Märge: React.lazy() sel viisil kasutades tagastab a Promise objektiks. See lubadus läheb moodulile, mis sisaldab Reacti komponenti, mida tahame sellesse laisk laadida default eksport.

Oleme rakendanud laisa laadimise React.lazy(), kuid ülaltoodud kood viskab alati tähe viga öeldes, et meie “React component suspended while rendering, but no fallback UI was specified”. Seda saab parandada komponendi mähkimisega React.Suspenses fallbackz ja varutugede kinnitamine, nagu me varem selgitasime:

import React from 'react';
const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <React.Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </React.Suspense>
      </div>
   );
};
export default Home;

Märge: Varurekvisiidil võib enne algse sisu laadimist kuvada mõni komponent.

Lisaks võime otsustada hävitamine Reacti import, et muuta kood puhtamaks ja loetavamaks:

import { lazy, Suspense } from 'react';
const AboutUs = lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </Suspense>
      </div>
   );
};
export default Home;

Siiani oleme näinud, kuidas meie imporditud komponentides laiska laadimist rakendada. Nüüd vaatame, kuidas seda oma marsruutidel Reacti ruuteriga marsruutimisel rakendada.

Kuidas rakendada Reacti ruuteriga laiska laadimist

Laisk marsruutimine on tegelikult hea tava marsruutide jaoks, millel on palju sisu ja mis võib teie rakenduse laadimisaega aeglustada. Laisa laadimise rakendamine Reacti marsruutide jaoks on peaaegu identne sellega, mida tegime varem dünaamiliselt imporditud komponentide laisklaadimisel.

Laisk laadimine React routes viitab komponendi dünaamilisele importimisele ainult siis, kui seda vajatakse. Oletame näiteks, et meie rakenduses on kaks marsruuti ja kaks komponenti, mis neid marsruute esindavad. Kui rakendame nimetatud marsruutimist järgmisel viisil, laaditakse iga komponent alles siis, kui navigeerime vastavale marsruudile:

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const Products = lazy(() => import('./Products'));

function App() {
   return (
      <BrowserRouter>
         <Suspense fallback={<div>Loading...</div>}>
            <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/products" element={<Products />} />
            </Routes>
         </Suspense>
      </BrowserRouter>
   );
}
export default App;

Järeldus

Sellest juhendist saime teada, mis on laisk laadimine ja koodi jagamine, kuidas neid rakendada ja et parim koht laiska laadimise rakendamiseks on marsruudid. See väldib kogu lehe korraga renderdamist, mille tulemuseks võib olla aeglasem laadimisaeg, kui käsitlete palju sisu sisaldavaid lehti.