Vai jūsu React lietojumprogramma ir pārāk lēna vai ielādēta pārāk ilgi? Ja tā, iespējams, vēlēsities izmantot paņēmienu, kas pazīstams kā koda sadalīšana. Šis paņēmiens ir ļoti efektīvs, lai uzlabotu React lietojumprogrammu ielādes ātrumu un veiktspēju. Bet kas ir koda sadalīšana? Un kā tas tiek darīts?

Kas ir koda sadalīšana?

Tipiskā React lietojumprogramma ietver desmitiem komponentu (un koda). Bet jums nav jāielādē lielākā daļa šo komponentu, kad tos ielādējat pirmo reizi. Koda sadalīšana ir saistīta ar dažādu lietojumprogrammas daļu sadalīšanu un tikai nepieciešamības gadījumā to ielādi. Tas ir daudz efektīvāk nekā visas lietojumprogrammas ielāde uzreiz.

Apsveriet React lietojumprogrammu, kurā ir trīs lapas: sākumlapa, lapa par un produktu lapa. Kad atrodaties sākumlapā, nav jēgas ielādēt lapu par vai produktu lapu. Jo jūs patiesībā vēl neesat šajās lapās. Koda sadalīšanas ideja ir nodrošināt, lai kods tiktu ielādēts tikai tad, kad tas ir nepieciešams.

Atveriet tīmekļa lapu savā tīmekļa pārlūkprogrammā un pēc tam atveriet DevTools (varat noklikšķināt uz tastatūras F12, lai to atvērtu pārlūkprogrammā Google Chrome). Pēc tam dodieties uz cilni Avots. Tur jūs atradīsiet visu kodu, kas ir lejupielādēts, pārejot uz lapu. Bez koda sadalīšanas pārlūkprogramma sākotnējās lapas ielādes laikā lejupielādē visus jūsu projekta failus. Tas var palēnināt vietnes darbību, ja tajā ir daudz failu.

Koda sadalīšana kļūst īpaši noderīga, kad jūsu projekts kļūst arvien lielāks. Tas ir tāpēc, ka visu lietojumprogrammu failu lejupielāde vienlaikus var aizņemt ļoti ilgu laiku. Tā sadalīšana būs diezgan izdevīga.

Labākā koda sadalīšanas daļa ir tā, ka varat aizkavēt komponentu, kā arī funkciju ielādi. Mūsu ReactJS ievada rokasgrāmata padziļināti izskaidro sastāvdaļas un funkcijas, ja nepieciešams atsvaidzinājums.

Koda sadalīšanas funkcijas: dinamiskās importēšanas izmantošana

Apsveriet šādu situāciju. Jūs vēlaties, lai jūsu mājaslapā būtu poga. Noklikšķinot uz pogas, jūs vēlaties brīdināt par summu 2 un 2 (kas ir 4). Tātad jūs izveidojat a Sākums.js komponentu un definējiet savas sākumlapas skatu.

Šajā gadījumā jums ir divas iespējas. Pirmkārt, varat importēt kodu, lai pievienotu ciparus augšpusē Sākums.js failu. Bet šeit ir problēma. Ja importējat funkciju faila augšdaļā, kods tiks ielādēts pat tad, ja neesat noklikšķinājis uz pogas. Labāka pieeja būs ielādēt summa () darbojas tikai tad, kad noklikšķināt uz pogas.

Lai to panāktu, jums būs jāveic dinamiska importēšana. Tas nozīmē, ka jūs importēsit summa () funkcija ir iekļauta pogas elementā. Šeit ir kods tam pašam:

eksportētnoklusējumafunkcijuMājas() { 
atgriezties ( 
"Mājas"> 
Mājas lapa</h1>
 {
imports("../sum.js").tad((modulis) => {
 brīdināt (modulis.sum(2, 2))
 })
 }}
 >
 Summējiet abus skaitļus
 </button> 
 </div> 
 ); 
}

Tagad pārlūkprogramma lejupielādēs tikai summa.js moduli, noklikšķinot uz pogas. Tas uzlabo sākumlapas ielādes laiku.

Koda sadalīšanas komponenti: React.lazy un Suspense izmantošana

React komponentus var sadalīt, izmantojot slinks () funkciju. Labākā vieta koda sadalīšanai būtu maršrutētājā. Jo šeit jūs kartējat komponentus maršrutos savā lietojumprogrammā. Jūs varat izlasīt mūsu ceļvedi vietnē kā izveidot vienas lapas lietotni, izmantojot React Router ja jums ir nepieciešams atsvaidzināt.

Pieņemsim, ka jūsu lietotnei ir Mājas, Par, un Produkti komponents. Kad esat pie Mājas komponents, nav jēgas ielādēt Par komponents vai Produkti komponents. Tāpēc jums tie ir jāatdala no Mājas maršruts. Šis kods parāda, kā to panākt:

Pirmkārt, jums ir jāimportē nepieciešamās funkcijas un komponenti no reaģēt un reaģēt-router-dom moduļi:

imports { Maršruti, maršruts, izeja, saite } no"react-router-dom";
imports { slinks, spriedze } no"reaģēt";

Pēc tam komponenti ir dinamiski jāimportē, izmantojot slinks () funkcija:

konst Mājas = slinks(() =>imports("./components/Home"));
konst Par = slinks(() =>imports("./components/Par"));
konst Produkti = slinks(() =>imports("./components/Produkti"));

Pēc tam iestatiet izkārtojumu (navigācijas izvēlni). Izmantojiet komponents, lai renderētu komponentu, kas atbilst pašreizējam maršrutam (Mājas, Par, vai Produkti komponents):

funkcijuNavWrapper() {
atgriezties (
 <>

Var redzēt, ka mēs iesaiņojam sastāvdaļas iekšā. Tas stāsta React, ka viss iekšā var tikt laiski ielādēts, kas nozīmē, ka tas var nebūt pieejams uzreiz. Šī iemesla dēļ, Neziņa komponentam ir a atkāpties īpašums. Mūsu gadījumā vērtība ir vienkāršs teksts ar uzrakstu "Notiek ielāde...". Tātad, kamēr tiek lejupielādēta katra lapa, ekrānā tiks rādīta informācija par ielādi.

Visbeidzot iestatiet maršrutu:

eksportētnoklusējumafunkcijuApp() {
atgriezties (

"/" elements={}>
"/" elements={} />
"/produkti" elements={} />
"/par" elements={} />
 </Route>
 </Routes>
 );
}

Tagad, kad apmeklējat sākumlapu, pārlūkprogramma ielādē tikai Sākums.js failu. Tādā pašā veidā, noklikšķinot uz Par saiti navigācijas izvēlnē, lai apmeklētu lapu Par, pārlūkprogramma ielādē tikai About.js failu. Tas pats attiecas uz lapu Produkti.

Nosacītā koda sadalīšana

Bieži vien jūsu lapā var būt saturs, kas attiecas tikai uz noteiktiem lietotājiem. Piemēram, jūsu sākumlapā var būt sadaļa ar administratora datiem, kas ir ekskluzīva administratora lietotājiem. Tas varētu būt administratora informācijas panelis, kas tiek rādīts administratoriem, bet ne parastajiem lietotājiem.

Šajā gadījumā jūs nevēlaties rādīt visus šos datus katru reizi. Šādā gadījumā varat izmantot koda sadalīšanas paņēmienu, lai nodrošinātu, ka šī informācija tiek rādīta tikai tad, ja šī persona ir administrators.

Lūk, kā šis kods izskatītos:

imports { slinks, spriedze } no"reaģēt";
konst AdminData = slinks(() =>imports("./AdminData"));
eksportētnoklusējumafunkcijuMājas() { 
konst [isAdmin, setIsAdmin] = useState(viltus)
atgriezties ( 

"Mājas"> 
Mājas lapa</h1>
 setIsAdmin(iepriekj => !iepriekšējais)}>
 Pārslēgt Admin
 </button> 

Notiek ielāde...</h1>}>
 {isAdmin? <AdminData />: <h2> Nevis administrators h2>} 
 </Suspense>
 </div> 
 ); 
}

Tagad, noklikšķinot uz pārslēgšanas pogas, isAdmin tiks iestatīts uz taisnība. Rezultātā lietotne parādīs kas tiek laiski ielādēts. Bet, ja neesat administrators, lietotne nekad netiks lejupielādēta AdminData.js jo tas nebūs vajadzīgs.

Nosacītā koda sadalīšana izmanto to pašu jēdzienu kā nosacījuma renderēšana programmā React.

Uzlabotas koda sadalīšanas koncepcijas

Viens no uzlabotajiem paņēmieniem, ko varat iespējot, sadalot kodu, ir pārejas. The useTransition() hook ļauj veikt neatliekamus atjauninājumus, kas nemainīs jūsu lietotāja interfeisu, kamēr nav pabeigta atjaunināšana.

Pirmkārt, jūs importējat āķi:

imports {useTransition} no"reaģēt"

Tad jūs saucat āķi, kas atgriežas gaida un sāktPāreja:

konst [isPending, startTransition] = useTransition()

Visbeidzot, iesaiņojiet kodu sava stāvokļa atjaunināšanai startTransition():

startTransition(() => {
 setIsAdmin((iepriekj) => !iepriekšējā)
})

Tagad jūsu faktiskais lietotāja interfeiss neparādīs atkāpšanās vērtību (ielādēšanas tekstu), kamēr pārlūkprogramma nepabeigs pāreju. Tas nozīmē, ka tas gaidīs, līdz pārlūkprogramma lejupielādēs visus administratora datus, pirms tā vispār mēģinās parādīt datus.

Citi veidi, kā optimizēt reakcijas veiktspēju

Šajā rakstā tika apskatīta koda sadalīšana kā metode React lietojumprogrammu veiktspējas uzlabošanai. Taču ir arī vairākas citas metodes, kas var sniegt jums nepieciešamās zināšanas, lai izveidotu stabilas lietojumprogrammas.