Je vaša aplikácia React príliš pomalá alebo jej načítanie trvá príliš dlho? Ak áno, možno budete chcieť použiť techniku ​​známu ako rozdelenie kódu. Táto technika je veľmi účinná pri zlepšovaní rýchlosti načítania a výkonu aplikácií React. Ale čo je rozdelenie kódu? A ako sa to robí?

Čo je delenie kódu?

Typická aplikácia React obsahuje desiatky komponentov (a kódu). Väčšinu týchto komponentov však pri prvom načítaní nemusíte načítať. Rozdelenie kódu znamená rozdelenie rôznych častí vašej aplikácie a ich načítanie len v prípade potreby. Je to oveľa efektívnejšie ako načítanie celej aplikácie naraz.

Zvážte aplikáciu React, ktorá má tri stránky: domovskú stránku, stránku s informáciami a stránku s produktmi. Keď ste na domovskej stránke, nemá zmysel načítavať stránku s informáciami alebo stránku produktov. Pretože na týchto stránkach ešte nie ste. Myšlienkou rozdelenia kódu je zabezpečiť, aby ste kód načítali iba vtedy, keď je to potrebné.

Otvorte webovú stránku vo svojom webovom prehliadači a potom otvorte DevTools (kliknutím na F12 na klávesnici ju otvoríte v prehliadači Google Chrome). Ďalej prejdite na kartu Zdroj. Tam nájdete všetok kód, ktorý sa stiahne, keď prejdete na stránku. Bez rozdelenia kódu prehliadač stiahne všetky súbory vo vašom projekte pri prvom načítaní stránky. To môže spomaliť váš web, ak obsahuje veľa súborov.

Rozdelenie kódu sa stáva obzvlášť užitočné, keď sa váš projekt začína zväčšovať a zväčšovať. Sťahovanie celých súborov aplikácie naraz totiž môže trvať veľmi dlho. Takže rozdeliť to bude celkom prospešné.

Najlepšie na rozdelení kódu je, že môžete oddialiť načítanie komponentov, ako aj funkcií. náš úvodná príručka k ReactJS podrobne vysvetľuje komponenty a funkcie pre prípad, že by ste sa potrebovali zopakovať.

Funkcie rozdelenia kódu: Použitie dynamického importu

Zvážte nasledujúcu situáciu. Chcete, aby vaša domovská stránka mala tlačidlo. Keď kliknete na tlačidlo, chcete upozorniť na súčet 2 a 2 (čo je 4). Takže vytvoríte a Home.js a definujte zobrazenie svojej domovskej stránky.

V tomto prípade máte dve možnosti. Najprv môžete importovať kód na pridávanie čísel v hornej časti Home.js súbor. Ale tu je problém. Ak by ste importovali funkciu v hornej časti súboru, kód sa načíta aj vtedy, keď ste na tlačidlo neklikli. Lepší prístup bude načítať súbor suma() funguje iba po kliknutí na tlačidlo.

Aby ste to dosiahli, budete musieť vykonať dynamický import. To znamená, že budete importovať suma() funkcia inline v prvku tlačidla. Tu je kód pre to isté:

exportpredvolenáfunkciuDomov() { 
vrátiť ( 
"Domov"> 
Domovská stránka</h1>
 {
importovať("../sum.js").potom((modul) => {
 upozornenie (modul.sum(2, 2))
 })
 }}
 >
 Spočítajte obe čísla
 </button> 
 </div> 
 ); 
}

Teraz prehliadač stiahne iba súbor sum.js modul, keď kliknete na tlačidlo. To zlepšuje čas načítania domovskej stránky.

Komponenty na delenie kódu: Používanie React.lazy a Suspense

Komponenty v Reacte môžete rozdeliť pomocou lenivý() funkciu. Najlepšie miesto na rozdelenie kódu je vo vnútri smerovača. Pretože tu mapujete komponenty na trasy vo vašej aplikácii. Nášho sprievodcu si môžete prečítať ďalej ako vytvoriť jednostránkovú aplikáciu pomocou React Router ak potrebujete osvieženie.

Predpokladajme, že vaša aplikácia má a Domov, O, a Produkty komponent. Keď ste na Domov komponentu, nemá zmysel načítavať O komponent alebo Produkty komponent. Takže ich musíte oddeliť od Domov trasu. Nasledujúci kód ukazuje, ako to dosiahnuť:

Najprv musíte importovať požadované funkcie a komponenty z reagovať a reagovať-smerovač-dom moduly:

importovať { Routes, Route, Outlet, Link } od"react-router-dom";
importovať { lenivý, napätie } od"reagovať";

Ďalej musíte komponenty dynamicky importovať pomocou lenivý() funkcia:

konšt Domov = lenivý(() =>importovať("./components/Home"));
konšt O = lenivý(() =>importovať("./components/About"));
konšt Produkty = lenivý(() =>importovať("./components/Products"));

Ďalej nastavte rozloženie (navigačná ponuka). Použi komponent na vykreslenie komponentu, ktorý zodpovedá aktuálnej trase (Domov, O, alebo Produkty komponent):

funkciuNavWrapper() {
vrátiť (
 <>

Môžete vidieť, že komponenty zabalíme dovnútra. Toto hovorí Reactu, že všetko vo vnútri má potenciál byť lenivo načítaný, čo znamená, že nemusí byť k dispozícii hneď. Z tohto dôvodu, Napätie komponent má a záložný nehnuteľnosť. V našom prípade je hodnotou jednoduchý text, ktorý hovorí „Načítavam...“. Takže zatiaľ čo sa každá zo stránok sťahuje, na obrazovke sa zobrazí načítavanie.

Nakoniec nastavte trasu:

exportpredvolenáfunkciuApp() {
vrátiť (

"/" element={}>
"/" element={} />
"/Produkty" element={} />
"/asi" element={} />
 </Route>
 </Routes>
 );
}

Teraz, keď navštívite domovskú stránku, prehliadač načíta iba súbor Home.js súbor. Rovnakým spôsobom, keď kliknete na O v navigačnom menu, aby ste navštívili stránku Informácie, prehliadač načíta iba About.js súbor. To isté platí pre stránku Produkty.

Rozdelenie podmieneného kódu

Na svojej stránke môžete mať často obsah, ktorý je použiteľný len pre určitých používateľov. Napríklad na svojej domovskej stránke môžete mať sekciu s údajmi správcu, ktorá je určená výhradne pre správcov. Môže to byť administračný panel, ktorý sa zobrazuje pre správcov, ale nie pre bežných používateľov.

V tomto prípade by ste nechceli zakaždým zobraziť všetky tieto údaje. V tomto prípade môžete použiť techniku ​​rozdelenia kódu, aby ste sa uistili, že tieto informácie zobrazíte iba vtedy, ak je táto osoba správcom.

Takto by vyzeral kód:

importovať { lenivý, napätie } od"reagovať";
konšt AdminData = lenivý(() =>importovať("./AdminData"));
exportpredvolenáfunkciuDomov() { 
konšt [isAdmin, setIsAdmin] = useState(falošný)
vrátiť ( 

"Domov"> 
Domovská stránka</h1>
 setIsAdmin(predch => !prev)}>
 Prepnúť na správcu
 </button> 

Načítavam...</h1>}>
 {je správca? <AdminData />: <h2> Nie správca h2>} 
 </Suspense>
 </div> 
 ); 
}

Teraz, keď kliknete na prepínač, isAdmin bude nastavená na pravda. V dôsledku toho aplikácia zobrazí ktorá sa lenivo načítava. Ak však nie ste správcom, aplikácia sa nikdy nestiahne AdminData.js pretože to nebude potrebovať.

Podmienené rozdelenie kódu využíva rovnaký koncept ako podmienené vykresľovanie v Reacte.

Pokročilé koncepty rozdelenia kódu

Jednou z pokročilých techník, ktoré môžete povoliť pri rozdeľovaní kódu, sú prechody. The useTransition() hák vám umožňuje vykonávať nie naliehavé aktualizácie, ktoré nezmenia vaše používateľské rozhranie, kým sa nedokončí aktualizácia.

Najprv importujte háčik:

importovať {useTransition} od"reagovať"

Potom zavoláte háčik, ktorý sa vráti isPending a startTransition:

konšt [isPending, startTransition] = useTransition()

Nakoniec zabaľte kód na aktualizáciu vášho stavu dovnútra startTransition():

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

Teraz vaše skutočné používateľské rozhranie nebude zobrazovať záložnú hodnotu (text načítania), kým prehliadač nedokončí prechod. To znamená, že bude čakať, kým prehliadač stiahne všetky údaje správcu, až potom sa pokúsi zobraziť nejaké údaje.

Ďalšie spôsoby optimalizácie výkonu reakcie

Tento článok sa týkal rozdelenia kódu ako metódy na zlepšenie výkonu vašich aplikácií React. Existuje však aj niekoľko ďalších metód, ktoré vám môžu poskytnúť potrebné znalosti na vytváranie robustných aplikácií.