Guide til doven indlæsning med React

Introduktion

Når vi udvikler store React-applikationer, bruger vi typisk mange billeder og videoer, installerer tredjepartspakker/biblioteker, laver API-kald og laver en række andre ting. Det øger naturligvis den tid, det tager at indlæse vores applikation, og resulterer i en massiv bundtstørrelse, som bidrager til en dårlig brugeroplevelse. Det er der doven lastning kommer på plads. Det gør os i stand til at indlæse indholdet lige til tiden, lige før det vil blive vist i applikationen.

Vi kan undgå at forudindlæse indhold, mens det stadig er ude af syne, og fokusere alle ressourcer på det indhold, der er i visningen.

I denne guide vil vi se på, hvordan du bruger React.lazy() , React.Suspense at implementere doven indlæsning og kodeopdelingsfunktionalitet, der giver os mulighed for at håndtere kodeopdeling uden behov for at installere yderligere biblioteker.

Hvad er Lazy Loading?

Når vi starter en React-webapplikation, samler den normalt hele applikationen på én gang, og indlæser alt inklusive hele web-appens sider, billeder, indhold og meget mere for os, hvilket potentielt kan resultere i en langsom indlæsningstid og generelt dårlig ydeevne, afhængigt af størrelsen af ​​indholdet og internetbåndbredden på det tidspunkt.

Lazy loading giver os mulighed for kun at indlæse specifikke komponenter, når de er nødvendige. Typisk optræder vi også opdeling af kode ind i logiske komponenter, der også kan lades med indholdet.

For eksempel, hvis vi har en dashboard-side, der viser en masse information fra forskellige kilder, når der klikkes på dem, er det altid bedst at holde disse komponenter og sider dovent indlæst, så de kun indlæses, når det er nødvendigt eller krævet af brugeren.

Bemærk: Processen med at spytte et stort bundt kode ind i flere bundter, der kan indlæses dynamisk med det overordnede mål at undgå ydeevneproblemer forbundet med overdimensionerede bundter, er kendt som kodeopdeling. Dette opnås uden at reducere mængden af ​​kode i vores app.

Sammenfattende giver doven indlæsning os mulighed for at gengive komponenter eller elementer efter behov, hvilket gør vores app mere effektiv og giver en bedre brugeroplevelse.

Bemærk: Enkeltsideapplikationer (SPA'er) er designet til at indeholde alle sider og indhold i et enkelt dokument/side. Det er derfor, at doven indlæsning er særlig praktisk, når man udvikler SPA'er.

Sådan implementeres Lazy Loading i React

Indtil videre har vi set, hvad lazy loading er, og hvorfor det er vigtigt at implementere. Lad os nu se på, hvordan vi kan implementere det i vores React-applikationer ved at bruge to React-funktioner, der gør kodeopdeling og doven indlæsning let at implementere – React.lazy() , Reager.Suspense.

React.lazy() er en funktion, der giver os mulighed for at gengive dynamisk import på samme måde som almindelige komponenter. Brug af dynamisk import sammen med React.lazy() vil gøre det muligt for os at importere en komponent lige før den gengives på en skærm. En vigtig ting at bemærke er det React.lazy() accepterer en funktion som et argument - den funktion skal kalde dynamikken import() i sin krop.

React.Suspense gør det muligt for os at specificere tilbagefaldet rekvisit som tager et pladsholderindhold ind, der ville blive brugt som en belastningsindikator mens alle de dovne komponenter bliver indlæst.

Lad os komme i gang med at se på, hvordan vi kan implementere lazy loading i vores importerede komponenter, og derefter hvordan vi kan implementere det i vores ruter, så sider ikke indlæses, før vi navigerer til dem.

Kom godt i gang

Antag, at vi har vores React-applikation, og vi importerede 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 implementere lazy loading ved at gøre brug af 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;

Bemærk: React.lazy() brugt på denne måde returnerer en Promise objekt. Det løfte løser sig til et modul, der indeholder en React-komponent, som vi vil lade indlæse i dens default eksport.

Vi har implementeret doven indlæsning vha React.lazy(), men koden ovenfor vil altid kaste en fejl siger, at vores “React component suspended while rendering, but no fallback UI was specified”. Dette kan løses ved at pakke komponenten med React.Suspense's fallbackz og vedhæftning af reserve-rekvisitter, som vi forklarede tidligere:

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;

Bemærk: Det kan tage en komponent at vise, før det originale indhold indlæses.

Derudover kan vi beslutte at destrukturere React-importen for at gøre koden renere og mere 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;

Indtil videre har vi set, hvordan man implementerer doven indlæsning i vores importerede komponenter. Lad os nu se, hvordan du implementerer det på vores ruter, mens du dirigerer med React-router.

Sådan implementeres Lazy Loading med React Router

Lazy routing er faktisk en god praksis for ruter, der har meget indhold og kan sænke din applikations indlæsningstid. Implementering af lazy loading for React-ruter er næsten identisk med det, vi gjorde tidligere, da vi lazy loading dynamisk importerede komponenter.

Lazy loading React-ruter refererer til dynamisk import af en komponent kun, når det er nødvendigt. Lad os for eksempel sige, at vi har to ruter i vores applikation og to komponenter, der repræsenterer disse ruter. Hvis vi implementerer nævnte routing på følgende måde, indlæses hver komponent kun, når vi navigerer til den tilsvarende rute:

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;

Konklusion

I denne guide lærte vi, hvad doven indlæsning og kodeopdeling er, hvordan man implementerer dem, og at det bedste sted at implementere doven indlæsning er med ruter. Dette undgår at gengive hele siden på én gang, hvilket kan resultere i en langsommere indlæsningstid, når der er tale om sider med store mængder indhold.