Hvordan optimeres React applikationer med Lazy Loading?

Til dine komponenter, billeder og hvad ikke

Lazy loading er en gammel teknik til at optimere webapplikationer såvel som på mobilapps. Sagen er ret ligetil - gengiv ikke ting, hvis de ikke ses eller kræves i det øjeblik. Så hvis vi for eksempel har en liste over indlæg, der skal vises, skal vi oprindeligt kun gengive det, der er på visningen. Det betyder, at resten af ​​elementerne gengives senere efter behov (når de er i visningen eller ved at være i visningen).

Hvorfor Lazy Loading?

De fleste gange ser vores brugere ikke hele websiden, i det mindste i starten. Uanset hvordan vores applikationsgrænseflade er struktureret, er der visse komponenter, som brugeren muligvis ikke har brug for i starten eller nogensinde!

I disse tilfælde skader gengivelse af disse komponenter ikke kun vores applikations ydeevne, men spilder også mange ressourcer (især når de har billeder eller lignende data-sultne indhold).

Så læsning eller gengivelse af disse komponenter efter behov ser ud til at være en mere effektiv beslutning. Det kan forbedre applikationens ydeevne og samtidig spare os for mange ressourcer.

Hvordan?

Vi laver en prøveansøgning, hvor vi kan anvende doven indlæsning. Først skal vi initialisere vores React-applikation ved hjælp create-react-appaf nedenstående kommandoer:

create-react-app lazydemocd lazydemonpm run start

Dette kan tage et par minutter at initialisere og åbne vores reageringsapplikation i browserens 3000port som standard.

Hvis du ikke har create-react-appinstalleret på din pc, kan du installere med kommandoen: npm install -g create-react-app

Nu laver vi en liste, der viser nogle tilfældige indlæg. Så lad os få nogle dummy-data først. Opret en fil med navnet data.jsinde i srcmappen for vores projekt. Jeg har lige kopieret jsonsvaret fra dette JSONpladsholder-slutpunkt //jsonplaceholder.typicode.com/posts. Du kan også oprette dine egne dummy-data. At følge nedenstående format skal være tilstrækkeligt til denne vejledning:

Lad os erstatte App.jsfilens indhold med nedenstående kode:

Her laver vi simpelthen en liste postsmed deres titleog body. Og med nogle enkle CSSændringer får vi udsigten til højre. Her er den fulde liste, der gengives på én gang. Hvis vi ikke oprindeligt ønsker at gengive alt, skal vi ansøge lazy loading. Lad os installere det i vores projekt:

Kilde: twobin / react-lazyload

npm install —-save react-lazyload

Lad os nu opdatere App.jsfilen ved at importere og anvende lazyload.

Brug react-lazyloader ret ligetil, bare pakk komponenten med t viser Indlæsning ... indtil komponenten er indlæst. Vi kan også e eff højde et af LazyLoad komponent. Du kan finde flere detaljer i dokumentationen: //github.com/twobin/react-lazyload#height … LazyLoad>. Here we are using a placeholder component > tha set thectiveand offs

Nu gengives ikke alle indlæg oprindeligt. Kun nogle få gengives oprindeligt afhængigt af visningen. Men da indholdet indtil nu er tekstmæssigt, kan effekten næppe realiseres, medmindre vi inspicerer og ser, at DOM ændrer sig, når de bevæger sig fra loadingtil loaded.

For at gøre vores dovne indlæsning mere effektiv, lad os inkorporere billeder i indlæg. Vi bruger Lorem Picsum til vores fotos. Vores opdaterede Postkomponent skal se ud nedenfor:

Lorem Picsum urlformat

//picsum.photos/id/ [image_id ]/ [bredde] / [højde]

Nu, som jeg sagde tidligere, er billeder datahungrige komponenter på en webside, og her indlæser vi billeder til hvert indlæg. Selvom hele komponenten er doven indlæst, og billedet også indlæses med komponenten, indlæses billedet lidt sent og ikke så glat. Så vi kan skabe en bedre billedindlæsningsoplevelse for vores bruger ved hjælp af LazyLoad til individuelle billeder.

Teknikken er at indlæse et billede af meget lav kvalitet som pladsholder, og derefter bliver det originale billede indlæst. Så finalen App.jsser ud som -

Nu kan vi scrolllisten med vores for inspect element openat se, hvordan disse komponenter ændres, når de kommer tæt på visningen, derefter gengives, og pladsholderen bliver erstattet af det faktiske indhold.

Og vi er færdige, for nu arbejder vores LazyLoad med al sin nåde. Det var ret let !!!

Billedet LazyLoad her er ikke den bedste brugssag, da det allerede er håndteret af komponenten LazyLoad. Men teknikken kan være meget nyttig i andre brugstilfælde, hvor vi skal vise mange billeder. Prøv at deaktivere komponenten LazyLoad on Post, men hold billedet LazyLoad, du kan se dens effekt.

Github: //github.com/nowshad-sust/lazydemo

Reager LazyLoad: twobin / react-lazyload