Ali je vaša aplikacija React prepočasna ali se predolgo nalaga? Če je tako, boste morda želeli uporabiti tehniko, znano kot razdelitev kode. Ta tehnika je zelo učinkovita pri izboljšanju hitrosti nalaganja in zmogljivosti aplikacij React. Toda kaj je razdelitev kode? In kako se to naredi?

Kaj je razdelitev kode?

Tipična aplikacija React je sestavljena iz desetin komponent (in kode). Vendar vam večine teh komponent ni treba naložiti, ko jih naložite prvič. Razdelitev kode vključuje razdelitev različnih delov vaše aplikacije in njihovo nalaganje samo, ko je to potrebno. To je veliko bolj učinkovito kot nalaganje celotne aplikacije hkrati.

Razmislite o aplikaciji React, ki ima tri strani: domačo stran, stran o tem in stran z izdelki. Ko ste na domači strani, nima smisla nalagati strani o tem ali strani z izdelki. Ker pravzaprav še niste na teh straneh. Ideja delitve kode je zagotoviti, da kodo naložite le, ko je potrebna.

Odprite spletno stran v spletnem brskalniku in nato odprite DevTools (lahko kliknete F12 na tipkovnici, da jo odprete v Google Chromu). Nato pojdite na zavihek Vir. Tam boste našli vso kodo, ki je bila prenesena, ko se pomaknete na stran. Brez razdelitve kode brskalnik prenese vse datoteke v vašem projektu ob začetnem nalaganju strani. To lahko upočasni vaše spletno mesto, če vsebuje veliko datotek.

Razdelitev kode postane še posebej uporabna, ko vaš projekt postaja vedno večji. To je zato, ker lahko nalaganje celotnih aplikacijskih datotek naenkrat traja zelo dolgo. Torej bo razdelitev tega zelo koristna.

Najboljši del delitve kode je, da lahko odložite nalaganje komponent in funkcij. Naš uvodni vodnik o ReactJS poglobljeno razlaga komponente in funkcije, če potrebujete osvežitev.

Funkcije razdelitve kode: uporaba dinamičnega uvoza

Razmislite o naslednji situaciji. Želite, da ima vaša domača stran gumb. Ko kliknete gumb, želite opozoriti na vsoto 2 in 2 (kar je 4). Torej ustvarite a Home.js komponento in določite pogled vaše domače strani.

V tem primeru imate dve možnosti. Najprej lahko uvozite kodo za dodajanje številk na vrhu Home.js mapa. Ampak tukaj je problem. Če bi uvozili funkcijo na vrhu datoteke, se bo koda naložila, tudi če niste kliknili gumba. Boljši pristop bo nalaganje vsota() deluje le, ko kliknete gumb.

Če želite to doseči, boste morali izvesti dinamični uvoz. To pomeni, da boste uvozili vsota() funkcija vstavljena v element gumba. Tukaj je koda za isto:

izvozprivzetofunkcijodomov() { 
vrnitev ( 
"dom"> 
Domača stran</h1>
 {
uvoz("../sum.js").potem((modul) => {
 opozorilo(modul.sum(2, 2))
 })
 }}
 >
 Seštejte obe števili
 </button> 
 </div> 
 ); 
}

Zdaj bo brskalnik samo prenesel sum.js modul, ko kliknete gumb. To izboljša čas nalaganja domače strani.

Komponente za razdelitev kode: uporaba React.lazy in Suspense

Komponente v Reactu lahko razdelite z uporabo len() funkcijo. Najboljše mesto za izvedbo delitve kode bi bilo znotraj vašega usmerjevalnika. Ker tukaj preslikate komponente v poti v vaši aplikaciji. Naš vodnik lahko preberete na kako zgraditi enostransko aplikacijo z React Routerjem če potrebujete osvežitev.

Recimo, da ima vaša aplikacija domov, O tem, in Izdelki komponento. Ko ste na domov komponento, nima smisla nalagati O tem komponento ali Izdelki komponento. Zato jih morate ločiti od domov pot. Naslednja koda prikazuje, kako to doseči:

Najprej morate uvoziti zahtevane funkcije in komponente iz reagirati in reagirati-usmerjevalnik-dom moduli:

uvoz { Poti, pot, prodajna točka, povezava } od"react-router-dom";
uvoz {leni, napetost} od"reagirati";

Nato morate dinamično uvoziti komponente z uporabo len() funkcija:

konst Doma = len(() =>uvoz("./components/Home"));
konst O = len(() =>uvoz("./components/About"));
konst Izdelki = leni(() =>uvoz("./components/Products"));

Nato nastavite postavitev (navigacijski meni). Uporabi komponenta za upodobitev komponente, ki ustreza trenutni poti (domov, O tem, oz Izdelki komponenta):

funkcijoNavWrapper() {
vrnitev (
 <>

Vidite lahko, da komponente zavijemo v notranjost. To Reactu pove, da je vse znotraj ima potencial za leno nalaganje, kar pomeni, da morda ne bo na voljo takoj. Iz tega razloga je Napetost komponenta ima a pasti nazaj premoženje. V našem primeru je vrednost preprosto besedilo, ki pravi "Nalaganje ...". Torej, medtem ko se vsaka od strani prenaša, bo na zaslonu pisalo nalaganje.

Na koncu nastavite pot:

izvozprivzetofunkcijoaplikacija() {
vrnitev (

"/" element={}>
"/" element={} />
"/izdelki" element={} />
"/o" element={} />
 </Route>
 </Routes>
 );
}

Zdaj, ko obiščete domačo stran, brskalnik naloži samo Home.js mapa. Na enak način, ko kliknete na O tem povezavo v navigacijskem meniju za obisk strani O strani, brskalnik naloži samo About.js mapa. Enako velja za stran Izdelki.

Pogojna delitev kode

Pogosto imate na svoji strani vsebino, ki je uporabna le za določene uporabnike. Na domači strani imate lahko na primer razdelek s skrbniškimi podatki, ki je izključno za skrbniške uporabnike. To je lahko skrbniška nadzorna plošča, ki se prikaže skrbniškim uporabnikom, ne pa običajnim uporabnikom.

V tem primeru ne bi želeli vsakič prikazati vseh teh podatkov. V tem primeru lahko uporabite tehniko razdelitve kode, da zagotovite, da te informacije prikažete samo, če je ta oseba skrbnik.

Tukaj je videti ta koda:

uvoz {leni, napetost} od"reagirati";
konst AdminData = lazy(() =>uvoz("./AdminData"));
izvozprivzetofunkcijodomov() { 
konst [isAdmin, setIsAdmin] = useState(lažno)
vrnitev ( 

"dom"> 
Domača stran</h1>
 setIsAdmin(prev => !prejšnji)}>
 Preklop skrbnika
 </button> 

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

Zdaj, ko kliknete preklopni gumb, je skrbnik bo nastavljeno na prav. Posledično bo aplikacija prikazala ki se leno nalaga. Če pa niste skrbniški uporabnik, se aplikacija ne bo nikoli prenesla AdminData.js ker ga ne bo treba.

Pogojna delitev kode uporablja isti koncept kot pogojno upodabljanje v Reactu.

Napredni koncepti razdelitve kode

Ena napredna tehnika, ki jo lahko omogočite pri delitvi kode, so prehodi. The useTransition() hook vam omogoča izvajanje nenujnih posodobitev, ki ne bodo spremenile vašega uporabniškega vmesnika, dokler ne končajo posodobitve.

Najprej uvozite kavelj:

uvoz {useTransition} od"reagirati"

Nato pokličete kavelj, ki se vrne je na čakanju in startTransition:

konst [je v čakanju, začetek prehoda] = useTransition()

Na koncu zavijte kodo za posodobitev svojega stanja startTransition():

startTransition(() => {
 setIsAdmin((prev) => !prejšnji)
})

Zdaj vaš dejanski uporabniški vmesnik ne bo prikazal rezervne vrednosti (besedilo za nalaganje), dokler brskalnik ne konča prehoda. To pomeni, da bo počakal, da brskalnik prenese celotne skrbniške podatke, preden bo sploh poskušal prikazati kakršne koli podatke.

Drugi načini za optimizacijo delovanja React

Ta članek je obravnaval razdelitev kode kot metodo za izboljšanje učinkovitosti vaših aplikacij React. Obstaja pa tudi več drugih metod, ki vam lahko dajo potrebno znanje za ustvarjanje robustnih aplikacij.