Je li vaša React aplikacija prespora ili se predugo učitava? Ako je tako, možda biste trebali upotrijebiti tehniku ​​poznatu kao dijeljenje koda. Ova tehnika je vrlo učinkovita u poboljšanju brzine učitavanja i izvedbe React aplikacija. Ali što je dijeljenje koda? I kako se to radi?

Što je dijeljenje koda?

Tipična React aplikacija sastoji se od desetaka komponenti (i koda). Ali većinu ovih komponenti ne morate učitati kada ih učitavate prvi put. Dijeljenje koda podrazumijeva razdvajanje različitih dijelova vaše aplikacije i njihovo učitavanje samo kada je to potrebno. To je daleko učinkovitije od učitavanja cijele aplikacije odjednom.

Razmotrite React aplikaciju koja ima tri stranice: početnu stranicu, stranicu s informacijama i stranicu s proizvodima. Kada ste na početnoj stranici, nema smisla učitavati stranicu s informacijama ili stranicu s proizvodima. Jer zapravo još niste na tim stranicama. Ideja dijeljenja koda je osigurati da učitavate kod samo kada je to potrebno.

Otvorite web stranicu u svom web pregledniku, a zatim otvorite DevTools (možete kliknuti F12 na tipkovnici da biste je otvorili u Google Chromeu). Zatim idite na karticu Izvor. Tamo ćete pronaći sav kôd koji je preuzet dok idete na stranicu. Bez dijeljenja koda, preglednik preuzima sve datoteke u vašem projektu pri početnom učitavanju stranice. To može usporiti vašu web stranicu ako sadrži mnogo datoteka.

Razdvajanje koda postaje osobito korisno kako vaš projekt postaje sve veći i veći. To je zato što preuzimanje cijele datoteke aplikacije odjednom može potrajati jako dugo. Dakle, podjela toga će biti vrlo korisna.

Najbolji dio o dijeljenju koda je to što možete odgoditi učitavanje komponenti, kao i funkcija. Naše uvodni vodič za ReactJS detaljno objašnjava komponente i funkcije u slučaju da trebate osvježenje.

Funkcije dijeljenja koda: korištenje dinamičkog uvoza

Razmotrite sljedeću situaciju. Želite da vaša početna stranica ima gumb. Kada kliknete gumb, želite upozoriti na zbroj 2 i 2 (što je 4). Dakle, stvorite a Home.js komponentu i definirajte prikaz svoje početne stranice.

U ovom slučaju imate dvije mogućnosti. Prvo, možete uvesti kod za dodavanje brojeva na vrhu Home.js datoteka. Ali ovdje je problem. Ako želite uvesti funkciju na vrhu datoteke, kod će se učitati čak i ako niste kliknuli gumb. Bolji pristup bit će učitavanje iznos() funkcionirati samo kada kliknete gumb.

Da biste to postigli, morat ćete izvršiti dinamički uvoz. To znači da ćete uvesti iznos() funkcija ugrađena u element gumba. Evo koda za isto:

izvozzadanofunkcijaDom() { 
povratak ( 
"Dom"> 
Početna stranica</h1>
 {
uvoz("../sum.js").zatim((modul) => {
 upozorenje(modul.iznos(2, 2))
 })
 }}
 >
 Zbroj oba broja
 </button> 
 </div> 
 ); 
}

Sada će preglednik preuzeti samo zbroj.js modul kada kliknete gumb. Ovo poboljšava vrijeme učitavanja početne stranice.

Komponente razdvajanja koda: korištenje React.lazy i Suspense

Komponente u Reactu možete podijeliti pomoću lijen() funkcija. Najbolje mjesto za izvođenje dijeljenja koda bilo bi unutar vašeg usmjerivača. Jer ovo je mjesto gdje mapirate komponente na rute u svojoj aplikaciji. Možete pročitati naš vodič na kako izraditi jednostraničnu aplikaciju s React Routerom ako trebaš osvježenje.

Pretpostavimo da vaša aplikacija ima Dom, Oko, i Proizvodi komponenta. Kada ste na Dom komponentu, nema smisla učitavati Oko komponenta ili Proizvodi komponenta. Dakle, morate ih odvojiti od Dom ruta. Sljedeći kod pokazuje kako to postići:

Najprije trebate uvesti potrebne funkcije i komponente iz reagirati i reagirati-usmjerivač-dom moduli:

uvoz { Rute, ruta, izlaz, veza } iz"react-router-dom";
uvoz { lijen, neizvjesnost } iz"reagirati";

Zatim morate dinamički uvesti komponente pomoću lijen() funkcija:

konst Dom = lijen(() =>uvoz("./components/Home"));
konst O = lijen(() =>uvoz("./components/O"));
konst Proizvodi = lijeni(() =>uvoz("./components/Products"));

Zatim postavite izgled (navigacijski izbornik). Koristiti komponenta za prikaz komponente koja odgovara trenutnoj ruti (Dom, Oko, ili Proizvodi komponenta):

funkcijaNavWrapper() {
povratak (
 <>

Vidite da umotavamo komponente unutra. Ovo govori Reactu da sve unutra ima potencijal za lijeno učitavanje, što znači da možda neće biti odmah dostupan. Iz tog razloga, Suspenzija komponenta ima a zamjena vlasništvo. U našem slučaju, vrijednost je jednostavan tekst koji kaže "Učitavanje...". Dok se svaka od stranica preuzima, na zaslonu će pisati učitavanje.

Na kraju postavite rutu:

izvozzadanofunkcijaaplikacija() {
povratak (

"/" element={}>
"/" element={} />
"/proizvodi" element={} />
"/oko" element={} />
 </Route>
 </Routes>
 );
}

Sada kada posjetite početnu stranicu, preglednik učitava samo Home.js datoteka. Na isti način, kada kliknete na Oko vezu u navigacijskom izborniku za posjet stranici O stranici, preglednik učitava samo About.js datoteka. Ovo je isto za stranicu Proizvodi.

Uvjetno razdvajanje koda

Često na svojoj stranici možete imati sadržaj koji je primjenjiv samo na određene korisnike. Na primjer, na svojoj početnoj stranici možete imati odjeljak s podacima administratora koji je ekskluzivan za korisnike administratora. Ovo bi mogla biti nadzorna ploča administratora koja se prikazuje korisnicima administratorima, ali ne i običnim korisnicima.

U ovom slučaju ne biste htjeli svaki put prikazati sve te podatke. U ovom slučaju možete upotrijebiti tehniku ​​dijeljenja koda kako biste bili sigurni da te informacije prikazujete samo ako je ta osoba administrator.

Evo kako bi taj kod izgledao:

uvoz { lijen, neizvjesnost } iz"reagirati";
konst AdminData = lijen(() =>uvoz("./AdminData"));
izvozzadanofunkcijaDom() { 
konst [isAdmin, setIsAdmin] = useState(lažno)
povratak ( 

"Dom"> 
Početna stranica</h1>
 setIsAdmin(prev => !pret)}>
 Uključi/isključi administratora
 </button> 

Učitavanje...</h1>}>
 {isAdmin? <AdminData />: <h2> Ne Admin h2>} 
 </Suspense>
 </div> 
 ); 
}

Sada, kada kliknete gumb za prebacivanje, jeAdmin bit će postavljeno na pravi. Kao rezultat toga, aplikacija će prikazati koji se lijeno učitava. Ali ako niste administrator, aplikacija se nikada neće preuzeti AdminData.js jer neće trebati.

Uvjetno dijeljenje koda koristi isti koncept kao uvjetno iscrtavanje u Reactu.

Napredni koncepti dijeljenja koda

Jedna napredna tehnika koju možete omogućiti prilikom dijeljenja koda su prijelazi. The useTransition() hook vam omogućuje ažuriranja koja nisu hitna i koja neće promijeniti vaše korisničko sučelje dok ne završe s ažuriranjem.

Prvo uvozite kuku:

uvoz {useTransition} iz"reagirati"

Zatim pozivate kuku, koja se vraća je na čekanju i startTransition:

konst [isPending, startTransition] = useTransition()

Na kraju, unutra zamotajte kod za ažuriranje vašeg stanja startTransition():

startTransition(() => {
 setIsAdmin((prev) => !prethodni)
})

Sada vaše stvarno korisničko sučelje neće prikazati zamjensku vrijednost (tekst za učitavanje) dok preglednik ne završi prijelaz. To znači da će čekati da preglednik preuzme sve administratorske podatke prije nego što uopće pokuša prikazati bilo kakve podatke.

Drugi načini za optimizaciju performansi Reacta

Ovaj je članak pokrivao dijeljenje koda kao metodu za poboljšanje performansi vaših React aplikacija. Ali postoji i nekoliko drugih metoda koje vam mogu dati potrebno znanje za izradu robusnih aplikacija.