Guide till lat laddning med React

Beskrivning

När vi utvecklar stora React-applikationer använder vi vanligtvis många bilder och videor, installerar tredjepartspaket/bibliotek, gör API-anrop och gör en mängd andra saker. Det ökar naturligtvis tiden det tar att ladda vår applikation och resulterar i en enorm paketstorlek, vilket bidrar till en dålig användarupplevelse. Det är där lat laddning kommer på plats. Det gör det möjligt för oss att ladda innehållet precis i tid, precis innan det kommer att visas i applikationen.

Vi kan undvika att förinläsa innehåll medan det fortfarande är osynligt och fokusera alla resurser på innehållet som finns i vyn.

I den här guiden kommer vi att titta på hur du använder React.lazy() och React.Suspense att implementera lazy loading och koddelningsfunktionalitet som gör att vi kan hantera koddelning utan att behöva installera några ytterligare bibliotek.

Vad är Lazy Loading?

När vi startar en React-webbapplikation paketerar den vanligtvis hela applikationen på en gång, och laddar allt inklusive hela webbappens sidor, bilder, innehåll och mycket mer åt oss, vilket potentiellt kan resultera i en långsam laddningstid och generellt dålig prestanda, beroende på storleken på innehållet och internetbandbredden vid tillfället.

Lazy loading tillåter oss att ladda specifika komponenter endast när de behövs. Vanligtvis utför vi också koduppdelning till logiska komponenter som kan laddas lat med innehållet också.

Till exempel, om vi har en instrumentpanelsida som visar mycket information från olika källor när den klickas på, är det alltid bäst att hålla dessa komponenter och sidor lata laddade, så att de bara laddas när det behövs eller krävs av användaren.

Notera: Processen att spotta en stor bunt kod i flera buntar som kan laddas dynamiskt med det övergripande målet att undvika prestandaproblem förknippade med överdimensionerade paket är känd som koddelning. Detta görs utan att minska mängden kod i vår app.

Sammanfattningsvis tillåter lazy loading oss att rendera komponenter eller element på begäran, vilket gör vår app mer effektiv och ger en bättre användarupplevelse.

Notera: Ensidiga applikationer (SPA) är utformade för att innehålla alla sidor och innehåll i ett enda dokument/sida. Det är därför lat laddning är särskilt praktiskt när man utvecklar SPA.

Hur man implementerar Lazy Loading i React

Hittills har vi sett vad lazy loading är och varför det är viktigt att implementera. Låt oss nu titta på hur vi kan implementera det i våra React-applikationer, med hjälp av två React-funktioner som gör koddelning och lat laddning lätt att implementera – React.lazy() och Reagera.Spänning.

React.lazy() är en funktion som låter oss rendera dynamisk import på samma sätt som vanliga komponenter. Använda dynamisk import tillsammans med React.lazy() gör det möjligt för oss att importera en komponent precis innan den renderas på en skärm. En viktig sak att notera är det React.lazy() accepterar en funktion som ett argument – ​​den funktionen måste anropa dynamiken import() i sin kropp.

React.Suspense gör det möjligt för oss att specificera reserv stötta som tar in ett platshållarinnehåll som skulle användas som en laddningsindikator medan alla lata komponenter laddas.

Låt oss börja med att titta på hur vi kan implementera lazy loading i våra importerade komponenter, och sedan hur vi kan implementera det i våra rutter så att sidor inte laddas förrän vi navigerar till dem.

Komma igång

Anta att vi har vår React-applikation och vi importerade About komponent i Home:

import AboutUs from './About';

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

export default Home;

Vi kan nu implementera lazy loading genom att använda oss 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;

Notera: React.lazy() används på detta sätt returnerar en Promise objekt. Det löftet löser sig till en modul som innehåller en React-komponent som vi vill lata ladda i sin default exportera.

Vi har implementerat lat laddning med hjälp av React.lazy(), men koden ovan kommer alltid att kasta en fel säger att vår “React component suspended while rendering, but no fallback UI was specified”. Detta kan fixas genom att linda in komponenten med React.Suspense's fallbackz och bifoga reservtillbehören som vi förklarade tidigare:

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;

Notera: Alternativet kan ta en komponent att visa innan det ursprungliga innehållet laddas upp.

Dessutom kan vi besluta att destrukturera React-importen för att göra koden renare och mer läsbar:

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;

Hittills har vi sett hur man implementerar lazy loading i våra importerade komponenter. Låt oss nu se hur man implementerar det i våra rutter medan vi dirigerar med React-router.

Hur man implementerar Lazy Loading med React Router

Lat routing är faktiskt en bra praxis för rutter som har mycket innehåll och kan sakta ner din applikations laddningstid. Att implementera lazy loading för React-rutter är nästan identiskt med vad vi gjorde tidigare när vi lazy loading dynamiskt importerade komponenter.

Lazy loading React-rutter syftar på att dynamiskt importera en komponent endast när den behövs. Säg till exempel att vi har två rutter i vår applikation och två komponenter som representerar dessa rutter. Om vi ​​implementerar nämnda routing på följande sätt, kommer varje komponent att laddas endast när vi navigerar till motsvarande rutt:

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;

Slutsats

I den här guiden lärde vi oss vad lat laddning och koddelning är, hur man implementerar dem och att det bästa stället att implementera lat laddning är med rutter. Detta undviker att rendera hela sidan på en gång, vilket kan resultera i en långsammare laddningstid vid hantering av sidor med stora mängder innehåll.