Guide til lat lasting med React

Introduksjon

Når vi utvikler store React-applikasjoner, bruker vi vanligvis mange bilder og videoer, installerer tredjepartspakker/biblioteker, foretar API-kall og gjør en rekke andre ting. Det øker naturligvis tiden det tar å laste applikasjonen vår og resulterer i en enorm pakkestørrelse, noe som bidrar til en dårlig brukeropplevelse. Det er hvor lat lasting kommer på plass. Det gjør det mulig for oss å laste inn innholdet akkurat i tide, rett før den vises i applikasjonen.

Vi kan unngå forhåndsinnlasting av innhold mens det fortsatt er ute av visning, og fokusere alle ressursene på innholdet som er i visningen.

I denne veiledningen skal vi se på hvordan du bruker React.lazy() og React.Suspense å implementere lat lasting og kodedelingsfunksjonalitet som lar oss håndtere kodedeling uten å måtte installere noen ekstra biblioteker.

Hva er Lazy Loading?

Når vi starter en React-nettapplikasjon, samler den vanligvis hele applikasjonen samtidig, og laster inn alt inkludert hele nettappens sider, bilder, innhold og mye mer for oss, noe som potensielt kan resultere i en langsom lastetid og generelt dårlig ytelse, avhengig av størrelsen på innholdet og internettbåndbredden på det tidspunktet.

Lazy loading lar oss laste spesifikke komponenter kun når de er nødvendige. Vanligvis utfører vi også kodedeling til logiske komponenter som også kan lades med innholdet.

For eksempel, hvis vi har en dashbordside som viser mye informasjon fra ulike kilder når den klikkes, er det alltid best å holde disse komponentene og sidene late-lastede, slik at de bare lastes når det er nødvendig eller kreves av brukeren.

OBS: Prosessen med å spytte en stor bunt med kode inn i flere bunter som kan lastes dynamisk med det overordnede målet om å unngå ytelsesproblemer knyttet til overdimensjonerte bunter er kjent som kodedeling. Dette oppnås uten å redusere mengden kode i appen vår.

Oppsummert, lazy loading lar oss gjengi komponenter eller elementer på forespørsel, noe som gjør appen vår mer effektiv og gir en bedre brukeropplevelse.

OBS: Enkeltsideapplikasjoner (SPA-er) er designet for å inneholde alle sider og innhold i ett enkelt dokument/side. Det er derfor lat lasting er spesielt nyttig når du utvikler SPA-er.

Hvordan implementere lat lasting i React

Så langt har vi sett hva lat lasting er og hvorfor det er viktig å implementere. La oss nå se på hvordan vi kan implementere det i våre React-applikasjoner, ved å bruke to React-funksjoner som gjør kodedeling og lat lasting lett å implementere – React.lazy() og Reager.Suspense.

React.lazy() er en funksjon som lar oss gjengi dynamisk import på samme måte som vanlige komponenter. Bruk av dynamisk import sammen med React.lazy() vil gjøre oss i stand til å importere en komponent rett før den gjengis på en skjerm. En viktig ting å merke seg er det React.lazy() aksepterer en funksjon som et argument – ​​den funksjonen må kalle dynamikken import() i kroppen sin.

React.Suspense gjør det mulig for oss å spesifisere reserven rekvisitt som tar inn et plassholderinnhold som vil bli brukt som en lasteindikator mens alle de late komponentene blir lastet.

La oss komme i gang med å se på hvordan vi kan implementere lat lasting i våre importerte komponenter, og deretter hvordan vi kan implementere det i våre ruter slik at sider ikke lastes inn før vi navigerer til dem.

Komme i gang

Anta at vi har vår React-applikasjon, og vi importerte About komponent inn i Home:

import AboutUs from './About';

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

export default Home;

Vi kan nå implementere lat lasting ved å gjøre bruk av 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;

OBS: React.lazy() brukt på denne måten returnerer en Promise gjenstand. Det løftet løser seg for en modul som inneholder en React-komponent vi ønsker å lade inn i den default eksport.

Vi har implementert lat lasting ved hjelp av React.lazy(), men koden ovenfor vil alltid kaste en feil sier at vår “React component suspended while rendering, but no fallback UI was specified”. Dette kan fikses ved å pakke inn komponenten med React.Suspense's fallbackz og feste reserverekvisittene som vi forklarte tidligere:

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;

OBS: Reserverekvisitten kan ta en komponent til å vises før det originale innholdet lastes inn.

I tillegg kan vi bestemme oss for det destrukturere React-importen for å gjøre koden renere og mer lesbar:

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;

Så langt har vi sett hvordan vi implementerer lat lasting i våre importerte komponenter. La oss nå se hvordan du implementerer det i rutene våre mens du ruter med React-ruteren.

Hvordan implementere lat lasting med React Router

Lat ruting er faktisk en god praksis for ruter som har mye innhold og kan redusere applikasjonens lastetid. Implementering av lat lasting for React-ruter er nesten identisk med det vi gjorde tidligere ved lat lasting av dynamisk importerte komponenter.

Lazy loading React-ruter refererer til dynamisk import av en komponent bare når det er nødvendig. La oss for eksempel si at vi har to ruter i applikasjonen vår og to komponenter som representerer disse rutene. Hvis vi implementerer nevnte ruting på følgende måte, vil hver komponent kun lastes når vi navigerer til den tilsvarende ruten:

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;

konklusjonen

I denne veiledningen lærte vi hva lat lasting og kodedeling er, hvordan du implementerer dem, og at det beste stedet å implementere lat lasting er med ruter. Dette unngår å gjengi hele siden på en gang, noe som kan resultere i en langsommere innlastingstid når du arbeider med sider med store mengder innhold.