Kas teie Reacti rakenduse laadimine on liiga aeglane või võtab liiga kaua aega? Kui jah, võiksite kasutada tehnikat, mida nimetatakse koodi jagamiseks. See tehnika on Reacti rakenduste laadimiskiiruse ja jõudluse parandamisel väga tõhus. Aga mis on koodi jagamine? Ja kuidas seda tehakse?

Mis on koodi jagamine?

Tüüpiline Reacti rakendus sisaldab kümneid komponente (ja koodi). Kuid enamikku neist komponentidest ei pea te esmakordsel laadimisel laadima. Koodi tükeldamine hõlmab teie rakenduse erinevate osade eraldamist ja nende laadimist ainult vajaduse korral. See on palju tõhusam kui kogu rakenduse korraga laadimine.

Kaaluge Reacti rakendust, millel on kolm lehekülge: avaleht, teabeleht ja toodete leht. Kui olete avalehel, pole mõtet laadida teavet või toodete lehte. Sest te pole tegelikult veel neil lehtedel. Koodi jagamise mõte on tagada, et laadite koodi ainult siis, kui see on vajalik.

Avage veebibrauseris veebileht ja seejärel DevTools (selle Google Chrome'is avamiseks võite klõpsata klaviatuuril F12). Järgmisena minge vahekaardile Allikas. Sealt leiate kogu koodi, mis lehele navigeerimisel alla laaditakse. Ilma koodi jagamiseta laadib brauser lehe algsel laadimisel alla kõik teie projekti failid. See võib teie veebisaiti aeglustada, kui see sisaldab palju faile.

Koodi jagamine muutub eriti kasulikuks, kui teie projekt hakkab aina suuremaks muutuma. Seda seetõttu, et kogu rakenduse failide korraga allalaadimine võib võtta väga kaua aega. Nii et selle poolitamine on üsna kasulik.

Koodi jagamise parim osa on see, et saate komponentide ja funktsioonide laadimist edasi lükata. Meie ReactJSi sissejuhatav juhend selgitab põhjalikult komponente ja funktsioone juhuks, kui vajate värskendust.

Koodi jagamise funktsioonid: dünaamilise impordi kasutamine

Kaaluge järgmist olukorda. Soovite, et teie kodulehel oleks nupp. Kui klõpsate nuppu, soovite hoiatada summade 2 ja 2 (mis on 4). Nii et loote a Home.js komponenti ja määrake oma kodulehe vaade.

Sel juhul on teil kaks võimalust. Esiteks saate importida koodi ülaosas olevate numbrite lisamiseks Home.js faili. Aga siin on probleem. Kui impordiksite faili ülaosas oleva funktsiooni, laaditakse kood isegi siis, kui te pole nuppu klõpsanud. Parem lähenemine on laadida summa() funktsiooni ainult siis, kui klõpsate nuppu.

Selle saavutamiseks peate teostama dünaamilise impordi. See tähendab, et impordite summa() funktsioon nupuelemendi sees. Siin on sama kood:

eksportidavaikimisifunktsiooniKodu() { 
tagasi ( 
"Kodu"> 
Koduleht</h1>
 {
importida("../sum.js").siis((moodul) => {
 hoiatus (moodul.sum(2, 2))
 })
 }}
 >
 Summa mõlemad arvud
 </button> 
 </div> 
 ); 
}

Nüüd laadib brauser alla ainult summa.js moodul, kui klõpsate nuppu. See parandab avalehe laadimisaega.

Koodi jagamise komponendid: React.lazy ja Suspense kasutamine

Saate Reactis komponente jagada, kasutades laisk () funktsiooni. Parim koht koodi jagamiseks oleks ruuteri sees. Sest siin kaardistate komponendid oma rakenduse marsruutidega. Saate lugeda meie juhendit kuidas luua React Routeriga üheleheline rakendus kui vajad värskendust.

Oletame, et teie rakendusel on a Kodu, Umbesja Tooted komponent. Kui olete juures Kodu komponenti pole mõtet laadida Umbes komponent või Tooted komponent. Nii et peate need eraldama Kodu tee. Järgmine kood näitab, kuidas seda saavutada:

Esiteks peate importima failist vajalikud funktsioonid ja komponendid reageerida ja reageerida-ruuter-dom moodulid:

importida { Routes, Route, Outlet, Link } alates"react-ruuter-dom";
importida { laisk, põnevus } alates"reageerida";

Järgmiseks peate komponendid dünaamiliselt importima, kasutades laisk () funktsioon:

konst Kodu = laisk(() =>importida("./components/Home"));
konst Umbes = laisk(() =>importida("./components/About"));
konst Tooted = laisk(() =>importida("./components/Products"));

Järgmisena seadistage paigutus (navigeerimismenüü). Kasuta komponent praegusele marsruudile vastava komponendi renderdamiseks (Kodu, Umbes, või Tooted komponent):

funktsiooniNavWrapper() {
tagasi (
 <>

Näete, et mähime komponendid sisse. See ütleb Reactile, et kõik sees on on potentsiaali laisalt laadida, mis tähendab, et see ei pruugi olla kohe saadaval. Sel põhjusel on Põnevus komponendil on a tagavara vara. Meie puhul on väärtuseks lihtne tekst, mis ütleb "Laaditakse...". Nii et kuni iga lehekülge alla laaditakse, kuvatakse ekraanil laadimine.

Lõpuks määrake marsruut:

eksportidavaikimisifunktsiooniRakendus() {
tagasi (

"/" element={}>
"/" element={} />
"/tooted" element={} />
"/umbes" element={} />
 </Route>
 </Routes>
 );
}

Nüüd, kui külastate avalehte, laadib brauser ainult Home.js faili. Samamoodi, kui klõpsate nupul Umbes lehe Teave külastamiseks navigeerimismenüü link, laadib brauser ainult About.js faili. Sama kehtib ka lehe Tooted kohta.

Tingimuslik koodi jagamine

Sageli võib teie lehel olla sisu, mis kehtib ainult teatud kasutajatele. Näiteks võib teie avalehel olla administraatoriandmetega jaotis, mis on ainult administraatorikasutajatele. See võib olla administraatori armatuurlaud, mis kuvatakse administraatorikasutajatele, kuid mitte tavakasutajatele.

Sel juhul ei soovi te kõiki neid andmeid iga kord näidata. Sel juhul saate kasutada koodi jagamise tehnikat, et tagada selle teabe kuvamine ainult siis, kui see inimene on administraator.

See kood näeks välja järgmine:

importida { laisk, põnevus } alates"reageerida";
konst AdminData = laisk(() =>importida("./AdminData"));
eksportidavaikimisifunktsiooniKodu() { 
konst [isAdmin, setIsAdmin] = useState(vale)
tagasi ( 

"Kodu"> 
Koduleht</h1>
 setIsAdmin(eelmine => !eelmine)}>
 Lülita Admin
 </button> 

Laadimine...</h1>}>
 {isAdmin? <AdminData />: <h2> Mitte administraator h2>} 
 </Suspense>
 </div> 
 ); 
}

Nüüd, kui klõpsate lülitusnupul, on Admin seatakse väärtusele tõsi. Selle tulemusena kuvab rakendus mida laisalt laaditakse. Kuid kui te pole administraator, ei laadita rakendust kunagi alla AdminData.js sest seda pole vaja.

Tingimuslik koodi jagamine kasutab sama kontseptsiooni nagu tingimuslik renderdamine rakenduses React.

Täpsemad koodijagamise kontseptsioonid

Üks täiustatud tehnika, mille saate koodi jagamisel lubada, on üleminekud. The useTransition() konks võimaldab teil teha mittekiireloomulisi värskendusi, mis ei muuda teie kasutajaliidest enne, kui värskendamine on lõpetatud.

Esiteks impordite konksu:

importida {useTransition} alates"reageerida"

Siis helistad konksule, mis tuleb tagasi on Ootel ja startTransition:

konst [isPending, startTransition] = useTransition()

Lõpuks mässige oma oleku värskendamise kood sisse startTransition():

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

Nüüd ei kuvata teie tegelik kasutajaliides varuväärtust (laadimisteksti) enne, kui brauser on ülemineku lõpetanud. See tähendab, et see ootab, kuni brauser laadib alla kõik administraatoriandmed, enne kui ta proovib andmeid üldse näidata.

Muud viisid reageerimise toimivuse optimeerimiseks

See artikkel käsitles koodi jagamist kui meetodit teie Reacti rakenduste jõudluse parandamiseks. Kuid on ka mitmeid muid meetodeid, mis annavad teile tugevate rakenduste loomiseks vajalikud teadmised.