Är din React-applikation för långsam eller tar det för lång tid att ladda? Om så är fallet kanske du vill använda en teknik som kallas koddelning. Denna teknik är mycket effektiv för att förbättra belastningshastigheten och prestandan för React-applikationer. Men vad är koddelning? Och hur görs det?

Vad är koddelning?

En typisk React-applikation består av dussintals komponenter (och kod). Men du behöver inte ladda de flesta av dessa komponenter när du laddar dem för första gången. Koddelning innebär att dela upp de olika delarna av din applikation och bara ladda dem när det behövs. Detta är mycket effektivare än att ladda hela applikationen på en gång.

Överväg en React-applikation som har tre sidor: hemsidan, sidan om och produktsidan. När du är på hemsidan är det ingen idé att ladda om sidan eller produktsidan. För du är faktiskt inte på de sidorna än. Idén med koddelning är att se till att du bara laddar koden när den behövs.

Öppna en webbsida i din webbläsare och öppna sedan DevTools (du kan klicka på F12 på tangentbordet för att öppna den i Google Chrome). Gå sedan till fliken Källa. Där hittar du all kod som laddas ner när du navigerar till sidan. Utan koddelning laddar webbläsaren ner alla filer i ditt projekt vid den första sidladdningen. Detta kan sakta ner din webbplats om den innehåller många filer.

Koddelning blir särskilt användbart när ditt projekt börjar bli större och större. Detta beror på att det kan ta väldigt lång tid att ladda ner hela applikationsfilerna på en gång. Så att dela upp det kommer att vara ganska fördelaktigt.

Det bästa med koddelning är att du kan fördröja laddningen av såväl komponenter som funktioner. Vår introduktionsguide om ReactJS förklarar komponenter och funktioner på djupet om du behöver en uppfräschning.

Koddelningsfunktioner: Använder dynamisk import

Tänk på följande situation. Du vill att din hemsida ska ha en knapp. När du klickar på knappen vill du varna summan av 2 och 2 (vilket är 4). Så du skapar en Home.js komponent och definiera vyn på din hemsida.

I det här fallet har du två alternativ. Först kan du importera koden för att lägga till siffrorna längst upp i Home.js fil. Men här är problemet. Om du skulle importera funktionen högst upp i filen, kommer koden att laddas även när du inte har klickat på knappen. Ett bättre tillvägagångssätt är att ladda belopp() fungerar endast när du klickar på knappen.

För att uppnå detta måste du utföra en dynamisk import. Det betyder att du kommer att importera belopp() funktion inline i knappelementet. Här är koden för detsamma:

exporterastandardfungeraHem() { 
lämna tillbaka ( 
"Hem"> 
Hemsida</h1>
 {
importera("../sum.js").sedan((modul) => {
 varna(modul.belopp(2, 2))
 })
 }}
 >
 Summera båda siffrorna
 </button> 
 </div> 
 ); 
}

Nu laddar webbläsaren bara ned sum.js modulen när du klickar på knappen. Detta förbättrar laddningstiden för hemsidan.

Koddelningskomponenter: Använder React.lazy och Suspense

Du kan dela upp komponenter i React med hjälp av lat() fungera. Det bästa stället att utföra koddelning är inuti din router. För det är här du mappar komponenter till rutter i din applikation. Du kan läsa vår guide på hur man bygger en ensidig app med React Router om du behöver en uppfräschning.

Låt oss anta att din app har en Hem, Handla om, och Produkter komponent. När du är vid Hem komponent, det är ingen idé att ladda Handla om komponent eller Produkter komponent. Så du måste dela bort dem från Hem rutt. Följande kod visar hur man uppnår det:

Först måste du importera de nödvändiga funktionerna och komponenterna från reagera och reagera-router-dom moduler:

importera { Rutter, Route, Outlet, Link } från"reagera-router-dom";
importera { lat, spänning } från"reagera";

Därefter måste du importera komponenterna dynamiskt med hjälp av lat() fungera:

konst Hemma = lat(() =>importera("./komponenter/Hem"));
konst Om = lat(() =>importera("./komponenter/Om"));
konst Produkter = lat(() =>importera("./components/Products"));

Ställ sedan in layouten (navigeringsmenyn). Använd komponent för att återge den komponent som motsvarar den aktuella rutten (Hem, Handla om, eller Produkter komponent):

fungeraNavWrapper() {
lämna tillbaka (
 <>

Du kan se att vi lindar in komponenterna inuti. Detta säger React att allt inuti har potential att laddas lätt, vilket innebär att den kanske inte är tillgänglig direkt. Av denna anledning har Spänning komponent har en Retirera fast egendom. I vårt fall är värdet enkel text som säger "Laster...". Så medan var och en av sidorna laddas ner, kommer det att stå att ladda på skärmen.

Slutligen, ställ in rutten:

exporterastandardfungeraApp() {
lämna tillbaka (

"/" element={}>
"/" element={} />
"/Produkter" element={} />
"/handla om" element={} />
 </Route>
 </Routes>
 );
}

Nu när du besöker hemsidan laddar webbläsaren bara Home.js fil. På samma sätt, när du klickar på Handla om länk i navigeringsmenyn för att besöka sidan Om, webbläsaren laddar endast About.js fil. Detta är samma sak för produktsidan.

Villkorlig koddelning

Ofta kan du ha innehåll på din sida som bara är tillämpligt på vissa användare. På din hemsida kan du till exempel ha ett avsnitt med administratörsdata som är exklusivt för administratörsanvändare. Detta kan vara en administratörsinstrumentpanel som visas för administratörsanvändare, men inte för vanliga användare.

I det här fallet skulle du inte vilja visa alla dessa data varje gång. I det här fallet kan du använda koddelningstekniken för att se till att du bara visar den informationen om den här personen är en administratör.

Så här skulle koden se ut:

importera { lat, spänning } från"reagera";
konst AdminData = lazy(() =>importera("./AdminData"));
exporterastandardfungeraHem() { 
konst [isAdmin, setIsAdmin] = useState(falsk)
lämna tillbaka ( 

"Hem"> 
Hemsida</h1>
 setIsAdmin(föregående => !föregående)}>
 Växla Admin
 </button> 

Laddar...</h1>}>
 {isAdmin? <AdminData />: <h2> Inte admin h2>} 
 </Suspense>
 </div> 
 ); 
}

Nu, när du klickar på växlingsknappen, är Admin kommer att ställas in på Sann. Som ett resultat kommer appen att visa som laddas lätt. Men om du inte är en administratörsanvändare kommer appen aldrig att laddas ner AdminData.js för det kommer inte att behövas det.

Villkorlig koddelning använder samma koncept som villkorlig rendering i React.

Avancerade koncept för koddelning

En avancerad teknik du kan aktivera när du delar upp kod är övergångar. De useTransition() hook låter dig göra icke-brådskande uppdateringar som inte kommer att ändra ditt användargränssnitt förrän de är klara med uppdateringen.

Först importerar du kroken:

importera {useTransition} från"reagera"

Sedan ringer du till kroken, som kommer tillbaka väntar och startaTransition:

konst [isPending, startTransition] = useTransition()

Slutligen, slå in koden för att uppdatera ditt tillstånd inuti startTransition():

startTransition(() => {
 setIsAdmin((föregående) => !föregående)
})

Nu kommer ditt faktiska användargränssnitt inte att visa reservvärdet (laddningstexten) förrän webbläsaren har slutfört övergången. Det betyder att den kommer att vänta på att webbläsaren laddar ner hela admindata innan den försöker visa någon data alls.

Andra sätt att optimera reaktionsprestanda

Den här artikeln behandlade koddelning som en metod för att förbättra prestandan för dina React-applikationer. Men det finns också flera andra metoder som kan ge dig den kunskap som krävs för att skapa robusta applikationer.