Gids voor lui laden met React

Introductie

Bij het ontwikkelen van grote React-applicaties gebruiken we meestal veel afbeeldingen en video's, installeren we pakketten/bibliotheken van derden, voeren we API-aanroepen uit en doen we een aantal andere dingen. Dat verlengt natuurlijk de tijd die nodig is om onze applicatie te laden en resulteert in een enorme bundelgrootte, wat bijdraagt ​​aan een slechte gebruikerservaring. Dat is waar trage voortgang op zijn plaats komt. Het stelt ons in staat om de inhoud te laden net op tijd, vlak voordat het in de applicatie wordt weergegeven.

We kunnen voorkomen dat inhoud vooraf wordt geladen terwijl deze nog uit het zicht is, en alle bronnen concentreren op de inhoud die in het zicht is.

In deze handleiding bekijken we hoe u React.lazy() en React.Suspense om luie laad- en codesplitsingsfunctionaliteit te implementeren waarmee we codesplitsing kunnen verwerken zonder de noodzaak om extra bibliotheken te installeren.

Wat is Lazy Loading?

Wanneer we een React-webtoepassing starten, bundelt deze meestal de hele toepassing in één keer, waarbij alles wordt geladen, inclusief de volledige web-app-pagina's, afbeeldingen, inhoud en nog veel meer voor ons, wat mogelijk kan resulteren in een langzame laadtijd en algehele slechte prestaties, afhankelijk van de grootte van de inhoud en de internetbandbreedte op dat moment.

Trage voortgang stelt ons in staat om specifieke componenten alleen te laden wanneer ze nodig zijn. Meestal treden we ook op: code splitsen in logische componenten die ook lui kunnen worden geladen met de inhoud.

Als we bijvoorbeeld een dashboardpagina hebben waarop veel informatie uit verschillende bronnen wordt weergegeven wanneer erop wordt geklikt, is het altijd het beste om deze componenten en pagina's 'lazy-loaded' te houden, zodat ze alleen worden geladen wanneer dat nodig of vereist is door de gebruiker.

Opmerking: Het proces van het spugen van een grote codebundel in meerdere bundels die dynamisch kunnen worden geladen met het algemene doel om prestatieproblemen in verband met te grote bundels te voorkomen, staat bekend als code splitsen. Dit wordt bereikt zonder de hoeveelheid code in onze app te verminderen.

Samengevat stelt lui laden ons in staat om componenten of elementen op aanvraag weer te geven, waardoor onze app efficiënter wordt en een betere gebruikerservaring wordt geboden.

Opmerking: Enkele pagina-apps (SPA's) zijn ontworpen om alle pagina's en inhoud binnen één document/pagina te bevatten. Daarom is lazy loading vooral handig bij het ontwikkelen van SPA's.

Lazy Loading implementeren in React

Tot nu toe hebben we gezien wat lui laden is en waarom het belangrijk is om het te implementeren. Laten we nu eens kijken hoe we het kunnen implementeren in onze React-applicaties, met behulp van twee React-functies die het splitsen van code en lui laden gemakkelijk maken om te implementeren: Reageer.lui() en Reageren.Suspense.

React.lazy() is een functie waarmee we kunnen renderen dynamische import op dezelfde manier als reguliere componenten. Dynamische import gebruiken naast de React.lazy() stelt ons in staat om een ​​component te importeren net voordat deze op een scherm wordt weergegeven. Een belangrijk ding om op te merken is dat: React.lazy() accepteert een functie als argument – ​​die functie moet de dynamic aanroepen import() in zijn lichaam.

React.Suspense stelt ons in staat om de fallback te specificeren stutten die plaatsaanduidingsinhoud inneemt die zou worden gebruikt als een laadindicator terwijl alle luie componenten worden geladen.

Laten we beginnen door te kijken hoe we 'lazy loading' kunnen implementeren in onze geïmporteerde componenten, en hoe we dit vervolgens in onze routes kunnen implementeren, zodat pagina's niet worden geladen totdat we ernaartoe navigeren.

Ermee beginnen

Stel dat we onze React-toepassing hebben en we hebben de About onderdeel in de Home:

import AboutUs from './About';

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

export default Home;

We kunnen nu lui laden implementeren door gebruik te maken van 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;

Opmerking: React.lazy() op deze manier gebruikt retourneert a Promise object. Die belofte wordt opgelost in een module die een React-component bevat die we willen lui laden in zijn default exporteren.

We hebben lui laden geïmplementeerd met behulp van React.lazy(), maar de bovenstaande code zal altijd een gooien fout zeggen dat onze “React component suspended while rendering, but no fallback UI was specified”. Dit kan worden opgelost door het onderdeel te omwikkelen met React.Suspense's fallbackz en het bevestigen van de fallback-rekwisieten zoals we eerder hebben uitgelegd:

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;

Opmerking: De fallback-prop kan een component nodig hebben om te worden weergegeven voordat de originele inhoud wordt geladen.

Daarnaast kunnen we besluiten om: destructureren de React-import om de code schoner en leesbaarder te maken:

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;

Tot nu toe hebben we gezien hoe we lazy loading kunnen implementeren in onze geïmporteerde componenten. Laten we nu eens kijken hoe we het in onze routes kunnen implementeren tijdens het routeren met React-router.

Lazy Loading implementeren met React Router

Luie routering is eigenlijk een goede gewoonte voor routes die veel inhoud bevatten en die de laadtijd van uw toepassing kunnen vertragen. Het implementeren van lui laden voor React-routes is bijna identiek aan wat we eerder deden bij het lui laden van dynamisch geïmporteerde componenten.

Lazy loading React routes verwijst naar het dynamisch importeren van een component alleen wanneer het nodig is. Stel bijvoorbeeld dat we twee routes in onze applicatie hebben en twee componenten die die routes vertegenwoordigen. Als we genoemde routering op de volgende manier implementeren, wordt elk onderdeel alleen geladen wanneer we naar de bijbehorende route navigeren:

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;

Conclusie

In deze handleiding hebben we geleerd wat lui laden en code splitsen zijn, hoe ze te implementeren en dat de beste plaats om lui laden te implementeren routes is. Dit voorkomt dat de hele pagina in één keer wordt weergegeven, wat kan resulteren in een langzamere laadtijd bij pagina's met grote hoeveelheden inhoud.