Er React-applikasjonen din for treg eller tar det for lang tid å laste? I så fall vil du kanskje bruke en teknikk kjent som kodedeling. Denne teknikken er svært effektiv til å forbedre belastningshastigheten og ytelsen til React-applikasjoner. Men hva er kodedeling? Og hvordan gjøres det?

Hva er kodedeling?

En typisk React-applikasjon består av dusinvis av komponenter (og kode). Men du trenger ikke å laste de fleste av disse komponentene når du laster dem for første gang. Kodedeling innebærer å dele opp de forskjellige delene av applikasjonen din og bare laste dem inn når det er nødvendig. Dette er langt mer effektivt enn å laste hele applikasjonen på en gang.

Vurder en React-applikasjon som har tre sider: hjemmesiden, om-siden og produktsiden. Når du er på hjemmesiden, er det ingen vits i å laste om-siden eller produktsiden. For du er faktisk ikke på disse sidene ennå. Ideen med kodedeling er å sørge for at du bare laster inn koden når det er nødvendig.

Åpne en nettside i nettleseren din, og åpne deretter DevTools (du kan klikke F12 på tastaturet for å åpne den på Google Chrome). Deretter går du til Kilde-fanen. Der finner du all koden som lastes ned mens du navigerer til siden. Uten kodedeling laster nettleseren ned alle filene i prosjektet ditt ved den første sideinnlastingen. Dette kan bremse nettstedet ditt hvis det inneholder mange filer.

Kodedeling blir spesielt nyttig ettersom prosjektet ditt begynner å bli større og større. Dette er fordi det kan ta veldig lang tid å laste ned hele applikasjonsfilene på en gang. Så å dele det opp vil være ganske fordelaktig.

Det beste med kodedeling er at du kan forsinke lasting av komponenter så vel som funksjoner. Vår introduksjonsguide om ReactJS forklarer komponenter og funksjoner i dybden i tilfelle du trenger en oppfriskning.

Kodedelingsfunksjoner: Bruker dynamisk import

Tenk på følgende situasjon. Du vil at hjemmesiden din skal ha en knapp. Når du klikker på knappen, vil du varsle summen av 2 og 2 (som er 4). Så du lager en Home.js komponent og definere visningen av hjemmesiden din.

I dette tilfellet har du to alternativer. Først kan du importere koden for å legge til tallene på toppen av Home.js fil. Men her er problemet. Hvis du skulle importere funksjonen øverst i filen, vil koden lastes selv når du ikke har trykket på knappen. En bedre tilnærming vil være å laste sum() fungerer bare når du klikker på knappen.

For å oppnå dette, må du utføre en dynamisk import. Dette betyr at du vil importere sum() funksjon innebygd i knappeelementet. Her er koden for det samme:

eksportmisligholdefunksjonHjem() { 
komme tilbake ( 
"Hjem"> 
Hjemmeside</h1>
 {
import("../sum.js").deretter((modul) => {
 varsling(modul.sum(2, 2))
 })
 }}
 >
 Summer begge tallene
 </button> 
 </div> 
 ); 
}

Nå vil nettleseren bare laste ned sum.js modul når du klikker på knappen. Dette forbedrer lastetiden til hjemmesiden.

Kodedelingskomponenter: Bruke React.lazy og Suspense

Du kan dele komponenter i React ved å bruke lat() funksjon. Det beste stedet å utføre kodedeling er inne i ruteren din. For det er her du kartlegger komponenter til ruter i applikasjonen din. Du kan lese vår guide på hvordan bygge en enkeltsides app med React Router hvis du trenger en oppfriskning.

La oss anta at appen din har en Hjem, Om, og Produkter komponent. Når du er på Hjem komponent, er det ingen vits i å laste inn Om komponent eller Produkter komponent. Så du må dele dem bort fra Hjem rute. Følgende kode viser hvordan du oppnår det:

Først må du importere de nødvendige funksjonene og komponentene fra reagere og reager-ruter-dom moduler:

import { Ruter, Rute, Outlet, Link } fra"reager-ruter-dom";
import { lat, spenning } fra"reagere";

Deretter må du importere komponentene dynamisk ved å bruke lat() funksjon:

konst Hjem = lat(() =>import("./komponenter/Hjem"));
konst Omtrent = lat(() =>import("./komponenter/Om"));
konst Produkter = lat(() =>import("./components/Products"));

Deretter setter du opp oppsettet (navigasjonsmenyen). Bruke komponent for å gjengi komponenten som tilsvarer gjeldende rute (Hjem, Om, eller Produkter komponent):

funksjonNavWrapper() {
komme tilbake (
 <>

Du kan se at vi pakker inn komponentene. Dette forteller React at alt inni har potensial til å lastes dovent, noe som betyr at den kanskje ikke er tilgjengelig med en gang. Av denne grunn har Spenning komponenten har en falle tilbake eiendom. I vårt tilfelle er verdien enkel tekst som sier «Laster...». Så mens hver av sidene lastes ned, kommer det til å stå lasting på skjermen.

Til slutt setter du opp ruten:

eksportmisligholdefunksjonApp() {
komme tilbake (

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

Nå når du besøker hjemmesiden, laster nettleseren bare inn Home.js fil. På samme måte, når du klikker på Om lenke i navigasjonsmenyen for å besøke Om-siden, laster nettleseren bare inn About.js fil. Dette er det samme for Produktsiden.

Betinget kodedeling

Ofte kan det hende du har innhold på siden din som bare gjelder for enkelte brukere. På hjemmesiden din kan du for eksempel ha en seksjon med administratordata som er eksklusivt for administratorbrukere. Dette kan være et admin-dashbord som vises for admin-brukere, men ikke for vanlige brukere.

I dette tilfellet vil du ikke vise alle disse dataene hver eneste gang. I dette tilfellet kan du bruke kodedelingsteknikken for å sikre at du bare viser den informasjonen hvis denne personen er en administrator.

Slik vil koden se ut:

import { lat, spenning } fra"reagere";
konst AdminData = lat(() =>import("./AdminData"));
eksportmisligholdefunksjonHjem() { 
konst [isAdmin, setIsAdmin] = useState(falsk)
komme tilbake ( 

"Hjem"> 
Hjemmeside</h1>
 setIsAdmin(forrige => !prev)}>
 Slå av/på Admin
 </button> 

Laster...</h1>}>
 {isAdmin? <AdminData />: <h2> Ikke administratoren h2>} 
 </Suspense>
 </div> 
 ); 
}

Nå, når du klikker på veksleknappen, er Admin vil bli satt til ekte. Som et resultat vil appen vise som blir dovent lastet. Men hvis du ikke er en administratorbruker, vil appen aldri lastes ned AdminData.js fordi det ikke kommer til å trenge det.

Betinget kodedeling bruker samme konsept som betinget gjengivelse i React.

Avanserte konsepter for kodedeling

En avansert teknikk du kan aktivere når du deler kode er overganger. De useTransition() hook lar deg gjøre ikke-hastende oppdateringer som ikke endrer brukergrensesnittet ditt før de er ferdige med oppdateringen.

Først importerer du kroken:

import {useTransition} fra"reagere"

Så ringer du kroken, som kommer tilbake venter og startTransition:

konst [isPending, startTransition] = useTransition()

Til slutt, pakk inn koden for oppdatering av staten startTransition():

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

Nå kommer ikke ditt faktiske brukergrensesnitt til å vise reserveverdien (innlastingsteksten) før nettleseren fullfører overgangen. Dette betyr at den kommer til å vente på at nettleseren laster ned hele admindataene før den prøver å vise data i det hele tatt.

Andre måter å optimalisere reaksjonsytelsen på

Denne artikkelen dekket kodedeling som en metode for å forbedre ytelsen til React-applikasjonene dine. Men det finnes også flere andre metoder som kan gi deg den nødvendige kunnskapen for å lage robuste applikasjoner.