Is uw React-applicatie te traag of duurt het te lang om te laden? Als dat het geval is, wilt u misschien een techniek gebruiken die bekend staat als codesplitsing. Deze techniek is zeer effectief in het verbeteren van de laadsnelheid en prestaties van React-applicaties. Maar wat is codesplitsing? En hoe wordt het gedaan?

Wat is codesplitsing?

Een typische React-applicatie bestaat uit tientallen componenten (en code). Maar u hoeft de meeste van deze componenten niet te laden wanneer u ze voor de eerste keer laadt. Het splitsen van codes houdt in dat de verschillende delen van uw applicatie worden opgesplitst en alleen worden geladen wanneer dat nodig is. Dit is veel efficiënter dan het in één keer laden van de hele applicatie.

Overweeg een React-applicatie die drie pagina's heeft: de startpagina, de over-pagina en de productenpagina. Als u zich op de startpagina bevindt, heeft het geen zin om de over-pagina of de productenpagina te laden. Omdat je nog niet echt op die pagina's bent. Het idee van het splitsen van codes is ervoor te zorgen dat u de code alleen laadt wanneer deze nodig is.

Open een webpagina in uw webbrowser en open vervolgens DevTools (u kunt op F12 op uw toetsenbord klikken om deze in Google Chrome te openen). Ga vervolgens naar het tabblad Bron. Daar vindt u alle code die is gedownload terwijl u naar de pagina navigeert. Zonder codesplitsing downloadt de browser alle bestanden in uw project bij het laden van de eerste pagina. Dit kan uw website vertragen als deze veel bestanden bevat.

Het splitsen van codes wordt vooral handig naarmate uw project groter en groter begint te worden. Dit komt omdat het in één keer downloaden van de volledige toepassingsbestanden erg lang kan duren. Dus dat opsplitsen zal heel voordelig zijn.

Het beste van het splitsen van codes is dat u het laden van zowel componenten als functies kunt vertragen. Ons inleidende gids over ReactJS legt componenten en functies grondig uit voor het geval je een opfriscursus nodig hebt.

Functies voor het splitsen van codes: dynamische import gebruiken

Beschouw de volgende situatie. U wilt dat uw startpagina een knop heeft. Wanneer u op de knop klikt, wilt u de som van 2 en 2 (wat 4 is) waarschuwen. Je maakt dus een Thuis.js component en definieer de weergave van uw homepage.

In dit geval heeft u twee opties. Eerst kunt u de code importeren voor het toevoegen van de nummers bovenaan de Thuis.js bestand. Maar hier is het probleem. Als u de functie bovenaan het bestand zou importeren, wordt de code ook geladen als u niet op de knop hebt geklikt. Een betere aanpak is om de som() functie alleen wanneer u op de knop klikt.

Om dit te bereiken, moet u een dynamische import uitvoeren. Dit betekent dat je de som() functie inline in het knopelement. Hier is de code voor hetzelfde:

exporterenstandaardfunctieThuis() { 
opbrengst ( 
"Thuis"> 
Startpagina</h1>
 {
importeren("../som.js").Dan((moduul) => {
 alarm (moduul.som(2, 2))
 })
 }}
 >
 Tel beide getallen bij elkaar op
 </button> 
 </div> 
 ); 
}

Nu zal de browser alleen de som.js module wanneer u op de knop klikt. Dit verbetert de laadtijd van de homepage.

Componenten voor het splitsen van code: React.lazy en Suspense gebruiken

U kunt componenten in React splitsen met behulp van de lui() functie. De beste plaats om codesplitsing uit te voeren, is in uw router. Omdat u hier componenten toewijst aan routes in uw toepassing. U kunt onze gids lezen op hoe je een app van één pagina bouwt met React Router als je een opfriscursus nodig hebt.

Stel dat uw app een Thuis, Over, En Producten bestanddeel. Wanneer je bij de Thuis component, heeft het geen zin om de Over bestanddeel of de Producten bestanddeel. Dus je moet ze splitsen van de Thuis route. De volgende code laat zien hoe u dat kunt bereiken:

Eerst moet u de vereiste functies en componenten importeren uit het Reageer En reactie-router-dom modules:

importeren { Routes, Route, Uitlaat, Link } van"reageren-router-dom";
importeren { lui, Spanning } van"Reageer";

Vervolgens moet u de componenten dynamisch importeren met behulp van de lui() functie:

const Thuis = lui(() =>importeren("./componenten/Home"));
const Over = lui(() =>importeren("./componenten/Over"));
const Producten = lui(() =>importeren("./componenten/Producten"));

Stel vervolgens de lay-out in (navigatiemenu). Gebruik de component om de component weer te geven die overeenkomt met de huidige route (Thuis, Over, of Producten bestanddeel):

functieNavWrapper() {
opbrengst (
 <>

Je kunt zien dat we de componenten erin verpakken. Dit vertelt React dat alles binnen is heeft de potentie om lui geladen te worden, wat betekent dat het misschien niet meteen beschikbaar is. Om deze reden is de Spanning onderdeel heeft een terugvallen eigendom. In ons geval is de waarde eenvoudige tekst met de tekst "Bezig met laden...". Dus terwijl elk van de pagina's wordt gedownload, staat er laden op het scherm.

Stel ten slotte de route in:

exporterenstandaardfunctieapp() {
opbrengst (

"/" element={}>
"/" element={} />
"/producten" element={} />
"/over" element={} />
 </Route>
 </Routes>
 );
}

Wanneer u nu de startpagina bezoekt, laadt de browser alleen de Thuis.js bestand. Op dezelfde manier, wanneer u klikt op de Over link in het navigatiemenu om de Over-pagina te bezoeken, laadt de browser alleen de Over.js bestand. Dit is hetzelfde voor de pagina Producten.

Voorwaardelijke codesplitsing

Vaak heeft u inhoud op uw pagina die alleen van toepassing is op bepaalde gebruikers. Op uw startpagina kunt u bijvoorbeeld een sectie met beheerdersgegevens hebben die exclusief is voor beheerders. Dit kan een beheerdersdashboard zijn dat wordt weergegeven voor beheerders, maar niet voor normale gebruikers.

In dit geval zou je niet elke keer al die gegevens willen laten zien. In dit geval kunt u de techniek van het splitsen van codes gebruiken om ervoor te zorgen dat u die informatie alleen laat zien als deze persoon een beheerder is.

Dit is hoe die code eruit zou zien:

importeren { lui, Spanning } van"Reageer";
const AdminData = lui(() =>importeren("./AdminData"));
exporterenstandaardfunctieThuis() { 
const [isAdmin, setIsAdmin] = useState(vals)
opbrengst ( 

"Thuis"> 
Startpagina</h1>
 setIsAdmin(vorige => !vorige)}>
 Toggle Beheerder
 </button> 

Bezig met laden...</h1>}>
 {isBeheerder? <AdminData />: <h2> Niet de beheerder h2>} 
 </Suspense>
 </div> 
 ); 
}

Als u nu op de schakelknop klikt, isAdmin zal worden ingesteld WAAR. Als gevolg hiervan zal de app de dat wordt lui geladen. Maar als u geen beheerder bent, wordt de app nooit gedownload AdminData.js want die zal het niet nodig hebben.

Voorwaardelijke codesplitsing gebruikt hetzelfde concept als voorwaardelijke weergave in React.

Geavanceerde concepten voor het splitsen van codes

Een geavanceerde techniek die u kunt inschakelen bij het splitsen van code zijn overgangen. De gebruikOvergang() hook stelt je in staat om niet-urgente updates uit te voeren die je UI niet zullen veranderen totdat ze klaar zijn met updaten.

Eerst importeer je de hook:

importeren {useTransition} van"Reageer"

Vervolgens call je de hook, die terugkeert is in afwachting van En startOvergang:

const [isPending, startTransition] = useTransition()

Verpak ten slotte de code voor het bijwerken van uw staat erin startOvergang():

startOvergang(() => {
 setIsAdmin((vorige) => !vorige)
})

Nu zal uw daadwerkelijke gebruikersinterface de terugvalwaarde (de laadtekst) niet weergeven totdat de browser de overgang voltooit. Dit betekent dat het zal wachten tot de browser alle beheerdersgegevens heeft gedownload voordat het probeert om gegevens weer te geven.

Andere manieren om reactieprestaties te optimaliseren

Dit artikel behandelt het splitsen van codes als een methode om de prestaties van uw React-applicaties te verbeteren. Maar er zijn ook verschillende andere methoden die u de vereiste kennis kunnen geven om robuuste applicaties te maken.