React lazy loading: componenten, routes en afbeeldingen

React lazy loading

React lazy loading: lazy, Suspense, routes en afbeeldingen | We.Inc

Lazy load React-componenten met lazy() en Suspense, splits routes in React Router, stel afbeeldingen uit met loading="lazy" en voorkom dat uw hoofdafbeelding trager wordt. Met live demo.

Lazy loading in React betekent dat code of afbeeldingen pas worden opgehaald wanneer ze nodig zijn. Wikkel een dynamische import in lazy(), render het component binnen een Suspense-grens met een fallback, en React downloadt het bij de eerste render. Voor afbeeldingen doet het HTML-attribuut loading="lazy" hetzelfde, maar nooit op uw hoofdafbeelding boven de vouw.

Welke lazy loading-tool bij welke taak past

Wat u uitstelt
Tool
Waar het gedocumenteerd is

Een zwaar component
lazy() plus Suspense

Een hele pagina of route
De lazy-eigenschap van de route

Afbeeldingen onder de vouw
loading="lazy" op img
MDN

Alles wat in beeld scrolt
IntersectionObserver
MDN

Een grote app-bundle laat elke bezoeker wachten op code die hij misschien nooit gebruikt, zoals een grafiek op een instellingentabblad of een beheerpagina. Lazy loading splitst die code in aparte bestanden die de browser op aanvraag ophaalt. Probeer de demo hieronder en kopieer daarna de patronen voor componenten, routes, afbeeldingen en content die bij scrollen laadt.

Verplaats het zware component naar een eigen bestand met een default export.
Schrijf bovenaan de module die het gebruikt: const Chart = lazy(() => import("./Chart")).
Render het binnen <Suspense fallback={...}>, zodat bezoekers een placeholder zien terwijl het bestand downloadt.
Wikkel het gebied in een error boundary, zodat een mislukte download een melding toont in plaats van een leeg scherm.

Declareer lazy componenten op moduleniveau. react.dev waarschuwt dat een declaratie binnen een ander component de state reset bij elke re-render.
Splits eerst per route. Pagina's zijn natuurlijke naden, en bezoekers hebben er zelden meer dan één tegelijk nodig.
Geef de hero-afbeelding fetchpriority="high" en geen lazy-attribuut, en lazy load de afbeeldingen verderop.
Maak de fallback even groot als de echte inhoud, zodat de pagina niet verspringt als die binnenkomt.

Veelgestelde vragen

Wat geeft React.lazy terug?

Een component dat u kunt renderen. De laadfunctie moet een Promise teruggeven die resolvet naar een object waarvan de default-eigenschap een geldig React-component is, wat een dynamische import() van een default export doet.

Laadt lazy() de code meer dan eens?

Nee. Volgens react.dev worden zowel de teruggegeven Promise als de geresolvede waarde gecachet, dus React roept de laadfunctie niet vaker dan eens aan. De demo op deze pagina laat zien dat het tweede openen direct gebeurt.

Kan ik een named export lazy loaden?

lazy() verwacht een default export. Voor een named export koppelt u die binnen de laadfunctie: lazy(() => import("./Charts").then((m) => ({ default: m.SalesChart }))).

Kan lazy loading een pagina trager maken?

Ja, voor de grootste afbeelding op het scherm. web.dev ontdekte dat lazy loading van afbeeldingen boven de vouw Largest Contentful Paint meestal vertraagde, en dat lazy loading van alleen afbeeldingen onder de vouw de databesparing behield zonder die nadelen.

Wat gebeurt er als het lazy bestand niet kan worden gedownload?

React gooit de reden van de afwijzing tijdens het renderen, en de dichtstbijzijnde error boundary vangt die op. Zonder error boundary verwijdert React volgens react.dev standaard de UI van de app van het scherm.

Lazy afbeeldingen en de grootste paint

Largest Contentful Paint, vaak afgekort tot LCP, meet wanneer de grootste afbeelding of het grootste tekstblok in beeld klaar is met renderen. Als die afbeelding wacht op de lazy loading-controle, komt ze later binnen.
In de tests van web.dev op WordPress-archiefpagina's verbeterde LCP als lazy loading werd uitgezet, en het beste resultaat kwam van lazy loading van alleen afbeeldingen onder de vouw.

Wanneer het niet de moeite is

Kleine componenten kosten als apart bestand meer dan ze besparen, omdat elk bestand een extra netwerkverzoek toevoegt. Lazy load wat groot is en niet meteen nodig, zoals editors, kaarten, grafieken en beheeromgevingen.
Verschijnt een component bij bijna elk bezoek direct na het laden, dan voegt splitsen alleen een laadflits toe.

Een component lazy loaden

Het standaardpatroon: één lazy-declaratie bovenaan het bestand, en een Suspense-grens rond de plek waar het rendert.

lazy() met Suspense en een error boundary

Het grafiekbestand wordt pas opgehaald wanneer showChart voor het eerst true wordt.

Routes lazy loaden in React Router

Route-objecten in React Router accepteren een lazy-functie die de eigenschappen van de route teruggeeft, zodat elke pagina een eigen bestand wordt.

Splitsen per route met createBrowserRouter

De rapportenpagina en haar loader worden pas gedownload wanneer iemand /reports bezoekt.

Afbeeldingen lazy loaden

Browsers ondersteunen lazy loading van afbeeldingen standaard. Markeer afbeeldingen onder de vouw als lazy en geef de hoofdafbeelding een hoge fetchprioriteit.

Native lazy afbeeldingen

Breedte en hoogte reserveren ruimte, zodat er niets verschuift als de afbeelding binnenkomt.

Renderen bij scrollen met IntersectionObserver

Voor content die geen afbeelding is, zoals een kaart of reviewwidget, vertelt een kleine hook u wanneer het vak in beeld komt.

useInView-hook

De rootMargin van 200px begint met laden net voordat het vak zichtbaar is; zodra het gezien is, koppelt de observer zich los.

Probeer het: een lazy component met een trage download

Deze knop rendert een component dat met lazy() is gemaakt. De download is nagebootst en duurt de eerste keer 2 seconden.

Verkoopgrafiek tonen

Verkoopgrafiek verbergen

Grafiekbestand laden...

Grafiekbestand geladen. Verberg het en toon het opnieuw: het verschijnt meteen, omdat React de eerste keer laden heeft gecachet.

React lazy loading: componenten, routes en afbeeldingen