Er din React-applikation for langsom eller tager det for lang tid at indlæse? Hvis ja, vil du måske bruge en teknik kendt som kodeopdeling. Denne teknik er meget effektiv til at forbedre belastningshastigheden og ydeevnen af ​​React-applikationer. Men hvad er kodeopdeling? Og hvordan gøres det?

Hvad er kodeopdeling?

En typisk React-applikation omfatter snesevis af komponenter (og kode). Men du behøver ikke at indlæse de fleste af disse komponenter, når du indlæser dem for første gang. Kodeopdeling indebærer at opdele de forskellige dele af din applikation og kun indlæse dem, når det er nødvendigt. Dette er langt mere effektivt end at indlæse hele applikationen på én gang.

Overvej en React-applikation, der har tre sider: hjemmesiden, siden om og produktsiden. Når du er på hjemmesiden, nytter det ikke noget at indlæse om-siden eller produktsiden. For du er faktisk ikke på de sider endnu. Ideen med kodeopdeling er at sikre, at du kun indlæser koden, når det er nødvendigt.

Åbn en webside på din webbrowser, og åbn derefter DevTools (du kan klikke på F12 på dit tastatur for at åbne den på Google Chrome). Gå derefter til fanen Kilde. Der finder du al den kode, der downloades, mens du navigerer til siden. Uden kodeopdeling downloader browseren alle filerne i dit projekt ved den første sideindlæsning. Dette kan gøre dit websted langsommere, hvis det indeholder mange filer.

Kodeopdeling bliver især nyttig, efterhånden som dit projekt begynder at blive større og større. Dette skyldes, at det kan tage meget lang tid at downloade hele applikationsfilerne på én gang. Så det vil være ret gavnligt at dele det op.

Det bedste ved kodeopdeling er, at du kan forsinke indlæsningen af ​​komponenter såvel som funktioner. Vores introduktionsvejledning om ReactJS forklarer komponenter og funktioner i dybden, hvis du har brug for en genopfriskning.

Kodeopdelingsfunktioner: Brug af dynamisk import

Overvej følgende situation. Du ønsker, at din hjemmeside skal have en knap. Når du klikker på knappen, vil du advare summen af ​​2 og 2 (som er 4). Så du opretter en Home.js komponent og definere visningen af ​​din hjemmeside.

I dette tilfælde har du to muligheder. Først kan du importere koden til at tilføje tallene øverst i Home.js fil. Men her er problemet. Hvis du skulle importere funktionen øverst i filen, så indlæses koden, selvom du ikke har klikket på knappen. En bedre tilgang vil være at indlæse sum() fungerer kun, når du klikker på knappen.

For at opnå dette skal du udføre en dynamisk import. Det betyder, at du vil importere sum() funktion inline i knapelementet. Her er koden til det samme:

eksportStandardfungereHjem() { 
Vend tilbage ( 
"Hjem"> 
Hjemmeside</h1>
 {
importere("../sum.js").derefter((modul) => {
 alert(modul.sum(2, 2))
 })
 }}
 >
 Sum begge tal
 </button> 
 </div> 
 ); 
}

Nu vil browseren kun downloade sum.js modul, når du klikker på knappen. Dette forbedrer starttiden for hjemmesiden.

Kodeopdelingskomponenter: Brug af React.lazy og Suspense

Du kan opdele komponenter i React ved hjælp af doven() fungere. Det bedste sted at udføre kodeopdeling ville være inde i din router. For det er her, du kortlægger komponenter til ruter i din applikation. Du kan læse vores guide på hvordan man bygger en enkeltsides app med React Router hvis du har brug for en genopfriskning.

Lad os antage, at din app har en Hjem, Om, og Produkter komponent. Når du er ved Hjem komponent, er der ingen mening i at indlæse Om komponent eller Produkter komponent. Så du skal dele dem væk fra Hjem rute. Følgende kode viser, hvordan man opnår det:

Først skal du importere de nødvendige funktioner og komponenter fra reagere og reagere-router-dom moduler:

importere { Ruter, Rute, Outlet, Link } fra"reager-router-dom";
importere { doven, spænding } fra"reagere";

Dernæst skal du importere komponenterne dynamisk ved hjælp af doven() fungere:

konst Hjem = doven(() =>importere("./komponenter/Hjem"));
konst Om = doven(() =>importere("./komponenter/Om"));
konst Produkter = doven(() =>importere("./komponenter/Produkter"));

Sæt derefter layoutet op (navigationsmenu). Brug komponent for at gengive den komponent, der svarer til den aktuelle rute (Hjem, Om, eller Produkter komponent):

fungereNavWrapper() {
Vend tilbage (
 <>

Du kan se, at vi pakker komponenterne ind. Dette fortæller React, at alt indeni har potentiale til at blive læsset dovent, hvilket betyder, at den måske ikke er tilgængelig med det samme. Af denne grund er Spænding komponent har en Falde tilbage ejendom. I vores tilfælde er værdien simpel tekst, der siger "Indlæser...". Så mens hver af siderne bliver downloadet, står der indlæsning på skærmen.

Til sidst konfigurerer du ruten:

eksportStandardfungereApp() {
Vend tilbage (

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

Når du nu besøger hjemmesiden, indlæser browseren kun Home.js fil. På samme måde, når du klikker på Om link i navigationsmenuen for at besøge siden Om, browseren indlæser kun About.js fil. Dette er det samme for produkter-siden.

Betinget kodeopdeling

Ofte kan du have indhold på din side, der kun gælder for bestemte brugere. For eksempel kan du på din hjemmeside have en sektion med administratordata, der er eksklusivt for administratorbrugere. Dette kan være et admin-dashboard, der vises for admin-brugere, men ikke for normale brugere.

I dette tilfælde ønsker du ikke at vise alle disse data hver eneste gang. I dette tilfælde kan du bruge kodeopdelingsteknikken til at sikre, at du kun viser den information, hvis denne person er en administrator.

Sådan ser den kode ud:

importere { doven, spænding } fra"reagere";
konst AdminData = doven(() =>importere("./AdminData"));
eksportStandardfungereHjem() { 
konst [isAdmin, setIsAdmin] = useState(falsk)
Vend tilbage ( 

"Hjem"> 
Hjemmeside</h1>
 setIsAdmin(forrige => !forrige)}>
 Skift Admin
 </button> 

Indlæser...</h1>}>
 {er Admin? <AdminData />: <h2> Ikke admin h2>} 
 </Suspense>
 </div> 
 ); 
}

Nu, når du klikker på skifte-knappen, er Admin vil blive indstillet til rigtigt. Som et resultat vil appen vise der bliver læsset dovent. Men hvis du ikke er en administratorbruger, vil appen aldrig downloade AdminData.js fordi den ikke får brug for det.

Betinget kodeopdeling bruger samme koncept som betinget gengivelse i React.

Avancerede kodeopdelingskoncepter

En avanceret teknik, du kan aktivere, når du opdeler kode, er overgange. Det useTransition() hook giver dig mulighed for at lave ikke-hastende opdateringer, som ikke ændrer din brugergrænseflade, før de er færdige med at opdatere.

Først importerer du krogen:

importere {useTransition} fra"reagere"

Så ringer du til krogen, som vender tilbage afventer og startTransition:

konst [isPending, startTransition] = useTransition()

Pak endelig koden til opdatering af din tilstand inde startTransition():

startTransition(() => {
 setIsAdmin((forrige) => !forrige)
})

Nu vil din faktiske brugergrænseflade ikke vise reserveværdien (indlæsningsteksten), før browseren afslutter overgangen. Det betyder, at den kommer til at vente på, at browseren downloader hele admin-dataene, før den forsøger at vise nogen data overhovedet.

Andre måder at optimere reaktionsydelsen på

Denne artikel dækkede kodeopdeling som en metode til at forbedre ydeevnen af ​​dine React-applikationer. Men der er også flere andre metoder, der kan give dig den nødvendige viden til at skabe robuste applikationer.