Sådan bruges React.lazy og Suspense til komponenter med lat ladning

Reaktion 16.6 bragte kodespaltning til et nyt niveau. Du kan nu indlæse dine komponenter, når det virkelig er nødvendigt uden at installere yderligere biblioteker.

Hvad er kodespaltning og doven indlæsning?

Webpack definerer kodespaltning som:

“Teknik til at opdele din kode i forskellige bundter, som derefter kan indlæses efter behov eller parallelt”. [Kilde]

En anden måde at sige: “lastning på efterspørgsel eller parallelt” er dovenladning.
Modsat lazy-loading er ivrig-lastning. Her indlæses alt, uanset om du bruger det eller ej.

Hvorfor skulle vi bruge kodespaltning og doven indlæsning?

Nogle gange er vi nødt til at introducere et stort stykke kode for at dække noget funktionalitet. Denne kode kan importere tredjepartsafhængighed eller skrive den på vores egen. Denne kode påvirker derefter hovedpakkens størrelse.

Download af et par MB er et stykke kage til dagens internethastighed. Vi er stadig nødt til at tænke på brugerne med en langsom internetforbindelse eller ved hjælp af mobildata.

Hvordan blev det gjort før reaktion 16.6?

Det mest populære bibliotek til doven indlæsning af React-komponenter er sandsynligvis reaktibelt.

Det er vigtigt, at reactjs.org stadig anbefaler reaktivt belastbart, hvis din app gengives på serveren. [Kilde]

reaktionsbelastbar er faktisk ret svarende til den nye tilgang fra React. Jeg vil vise dette i følgende demo.

Er der brug for noget til opsætning?

Lad os se, hvad reactjs.org har at sige om det:

”Hvis du bruger Create React-app, Next.js, Gatsby eller et lignende værktøj, får du en Webpack-opsætning ud af boksen for at sammenlægge din app.
Hvis du ikke gør det, bliver du nødt til at konfigurere bundling af dig selv. Se f.eks. Installations- og Kom godt i gang i Webpack-dokumenterne. “
- reactjs.org

OK, så Webpack er påkrævet, som håndterer dynamisk import af bundterne.

Følgende demo genereres ved hjælp af Create React App. Og i dette tilfælde er Webpack allerede konfigureret, og vi er klar til at gå.

DEMO

Til denne demo bruger vi react-pdf. react-pdf er et fantastisk bibliotek, der bruges til at oprette PDF-filer på browseren, mobilen og serveren. Vi kunne generere en PDF på serveren, men hvis vi hellere vil gøre det på klientsiden, kommer det med en omkostning: bundtstørrelse.

Import af omkostninger
Jeg bruger Importer omkostningsudvidelse til Visual Studio-kode for at se størrelserne på de anvendte biblioteker.

Lad os sige, at vores krav er at generere en PDF-fil, når en bruger klikker på knappen.

Nu er dette en enkel form med kun én brugssag. Prøv at forestille dig en enorm webapp, hvor dette er en brøkdel af mulighederne. Måske bruges denne funktionalitet ikke så ofte af brugerne.

Lad os sætte os ind i den situation. PDF-generation bruges ikke meget ofte, og det giver ikke mening at indlæse hele koden til hver sideanmodning.

Jeg vil prøve at vise, hvordan vi kan udvikle en løsning med doven belastning og uden den.

Ivrig VS doven lastning af udstillingsvindue

I begge tilfælde bruger vi en komponent, der importerer afhængigheder fra react-pdf og gengiver et simpelt PDF-dokument.

Intet spektakulært foregår her. Vi importererPDFViewer, dokument, side, tekst, udsigt fra react-pdf. Disse bruges alle i gengivelsesmetoden til PDFPreview-komponenten.

PDFPreview modtager kun en prop, der kaldes titel. Som navnet antyder, bruges det som en titel i en nyligt genereret PDF-fil.

pdfStyles.js ser sådan ud:

Ivrig lastning

Lad os først se, hvordan den overordnede komponent uden doven belastning kan se ud:

som gengiver følgende visning i browseren:

Lad os gennemgå koden sammen:

På linje 2 importerer vi PDFPreview-komponent.

På linje 6 initialiserer vi tilstanden med standardværdier. navn er et felt, der bruges som titel i PDF-filen, mens felt PDFPreview er en boolsk, der viser eller skjuler PDFPreview.

Lad os nu springe til gengivelsesmetode og tjekke, hvad der vil blive gengivet.

På linje 19 og 25 gengiver vi et input og en knap. Når bruger indtaster input, ændres navn i tilstand.

Når en bruger derefter klikker på “Generer PDF”, er showPDFPreview indstillet til sand. Komponenten gendanner og viser PDFPreview-komponenten.

Selvom vi kun bruger PDFPreview ved brugervenligt klik, er al kode relateret hertil inkluderet i appbunten:

Dette er et udviklingsmiljø. I produktionen ville størrelserne være betydeligt mindre. Vi deler stadig ikke koden optimalt.

Lat ladning

Vi har kun foretaget små ændringer, og lad os gennemgå dem.

Linie 2 erstattes med:
 const LazyPDFDocument = React.lazy (() => import ("./ PDFPreview"));

Lad os se, hvad React-dokumenterne siger om React.lazy:

React.lazy tager en funktion, der skal kalde en dynamisk import (). Dette skal returnere en løfte, der løses til et modul med en standardeksport, der indeholder en React-komponent.
- reactjs.org

På linje 27 bruger vi Suspense, som skal være en forælder til en doven-ladet komponent. Når showPDFPreview er indstillet til sand, begynder LazyPDFDocument at indlæses.

Indtil barnekomponenten er løst, viser Suspense, hvad der leveres til tilbagevendende rekvisitter.

Slutresultatet ser sådan ud:

Vi kan se 0.chunk.js vægte væsentligt mindre end før, og 4.chunk.js og 3.chunk.js indlæses på knappetryk.

Konklusion

Hver gang vi introducerer en ny afhængighed i vores projekt, er vores ansvar at evaluere dets omkostninger og kontrollere, hvordan det påvirker hovedpakken.

Så må vi spørge, om denne funktionalitet bliver brugt sjældent, og kan vi indlæse den efter behov uden at ofre brugeroplevelsen.

Hvis svaret er ja, hjælper React.Lazy og Suspense os virkelig med denne opgave.

Tak fordi du læste! Del det med enhver, der måske synes det er nyttigt og efterlad feedback.