Je vaše aplikace React příliš pomalá nebo její načítání trvá příliš dlouho? Pokud ano, možná budete chtít použít techniku ​​známou jako dělení kódu. Tato technika je velmi účinná při zlepšování rychlosti načítání a výkonu aplikací React. Ale co je dělení kódu? A jak se to dělá?

Co je dělení kódu?

Typická aplikace Reactu obsahuje desítky komponent (a kódu). Většinu těchto součástí ale nemusíte načítat, když je načítáte poprvé. Rozdělení kódu znamená rozdělení různých částí vaší aplikace a jejich načítání pouze v případě potřeby. To je mnohem efektivnější než načítání celé aplikace najednou.

Zvažte aplikaci React, která má tři stránky: domovskou stránku, stránku s informacemi a stránku s produkty. Když jste na domovské stránce, nemá smysl načítat stránku o produktu nebo stránku s produkty. Protože na těch stránkách ještě nejste. Myšlenka rozdělení kódu je zajistit, abyste kód načetli pouze tehdy, když je to potřeba.

Otevřete webovou stránku ve webovém prohlížeči a poté otevřete DevTools (kliknutím na F12 na klávesnici ji otevřete v prohlížeči Google Chrome). Dále přejděte na kartu Zdroj. Zde najdete veškerý kód, který se stáhne při přechodu na stránku. Bez rozdělení kódu prohlížeč stáhne všechny soubory ve vašem projektu při prvním načtení stránky. To může zpomalit váš web, pokud obsahuje mnoho souborů.

Rozdělení kódu se stává obzvláště užitečné, když se váš projekt začíná zvětšovat a zvětšovat. Stažení celých souborů aplikace najednou totiž může trvat velmi dlouho. Takže to rozdělení bude docela prospěšné.

Nejlepší na rozdělení kódu je, že můžete zpozdit načítání komponent i funkcí. Náš úvodní průvodce ReactJS podrobně vysvětluje komponenty a funkce pro případ, že byste se potřebovali osvěžit.

Funkce dělení kódu: Použití dynamického importu

Zvažte následující situaci. Chcete, aby vaše domovská stránka měla tlačítko. Když kliknete na tlačítko, chcete upozornit na součet 2 a 2 (což je 4). Takže vytvoříte a Home.js a definujte zobrazení vaší domovské stránky.

V tomto případě máte dvě možnosti. Nejprve můžete importovat kód pro přidání čísel v horní části Home.js soubor. Ale tady je problém. Pokud byste importovali funkci v horní části souboru, kód se načte, i když jste na tlačítko neklikli. Lepší přístup bude načíst soubor součet() fungovat pouze po kliknutí na tlačítko.

Chcete-li toho dosáhnout, budete muset provést dynamický import. To znamená, že budete importovat součet() funkce inline v prvku tlačítka. Zde je kód pro totéž:

vývoznívýchozífunkceDomov() { 
vrátit se ( 
"Domov"> 
Domovská stránka</h1>
 {
import("../sum.js").pak((modul) => {
 upozornění (modul.součet(2, 2))
 })
 }}
 >
 Sečtěte obě čísla
 </button> 
 </div> 
 ); 
}

Nyní prohlížeč pouze stáhne sum.js modulu, když kliknete na tlačítko. To zlepšuje dobu načítání domovské stránky.

Komponenty pro dělení kódu: Použití React.lazy a Suspense

Komponenty v Reactu můžete rozdělit pomocí líný() funkce. Nejlepší místo pro rozdělení kódu je uvnitř vašeho routeru. Protože zde mapujete komponenty na trasy ve vaší aplikaci. Náš návod si můžete přečíst na jak vytvořit jednostránkovou aplikaci pomocí React Router pokud potřebujete osvěžení.

Předpokládejme, že vaše aplikace má a Domov, O, a produkty komponent. Když jste na Domov komponentu, nemá smysl načítat O komponentu nebo produkty komponent. Takže je musíte oddělit od Domov trasa. Následující kód ukazuje, jak toho dosáhnout:

Nejprve musíte importovat požadované funkce a komponenty z reagovat a reagovat-router-dom moduly:

import { Routes, Route, Outlet, Link } z"react-router-dom";
import { líný, napětí } z"reagovat";

Dále musíte importovat komponenty dynamicky pomocí líný() funkce:

konst Domov = líný(() =>import("./components/Home"));
konst O = líný(() =>import("./components/About"));
konst Produkty = líný(() =>import("./components/Products"));

Dále nastavte rozvržení (navigační nabídka). Použijte komponenta k vykreslení komponenty, která odpovídá aktuální trase (Domov, Onebo produkty komponent):

funkceNavWrapper() {
vrátit se (
 <>

Vidíte, že komponenty zabalíme dovnitř. To říká Reactu, že všechno uvnitř má potenciál být líně načten, což znamená, že nemusí být hned k dispozici. Z tohoto důvodu, Napětí komponenta má a ustoupit vlastnictví. V našem případě je hodnotou jednoduchý text, který říká „Načítání...“. Takže zatímco se každá ze stránek stahuje, na obrazovce se zobrazí načítání.

Nakonec nastavte trasu:

vývoznívýchozífunkceAplikace() {
vrátit se (

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

Nyní, když navštívíte domovskou stránku, prohlížeč načte pouze Home.js soubor. Stejným způsobem, když kliknete na O odkaz v navigační nabídce a přejděte na stránku O aplikaci, prohlížeč načte pouze O.js soubor. Totéž platí pro stránku Produkty.

Podmíněné rozdělení kódu

Často můžete mít na své stránce obsah, který je použitelný pouze pro určité uživatele. Například na své domovské stránce můžete mít sekci s údaji správce, která je vyhrazena pouze uživatelům s oprávněním správce. Může to být panel správce, který se zobrazuje uživatelům správce, ale ne normálním uživatelům.

V tomto případě byste nechtěli pokaždé zobrazovat všechna tato data. V tomto případě můžete použít techniku ​​dělení kódu, abyste zajistili, že tyto informace zobrazíte pouze v případě, že je tato osoba správcem.

Zde je návod, jak by tento kód vypadal:

import { líný, napětí } z"reagovat";
konst AdminData = líný(() =>import("./AdminData"));
vývoznívýchozífunkceDomov() { 
konst [isAdmin, setIsAdmin] = useState(Nepravdivé)
vrátit se ( 

"Domov"> 
Domovská stránka</h1>
 setIsAdmin(předchozí => !předchozí)}>
 Přepnout na správce
 </button> 

Načítání...</h1>}>
 {je správce? <AdminData />: <h2> Ne Admin h2>} 
 </Suspense>
 </div> 
 ); 
}

Nyní, když kliknete na přepínací tlačítko, isAdmin bude nastaveno na skutečný. V důsledku toho aplikace zobrazí která se líně načítá. Pokud ale nejste administrátor, aplikace se nikdy nestáhne AdminData.js protože to nebude potřebovat.

Podmíněné rozdělení kódu používá stejný koncept jako podmíněné vykreslování v Reactu.

Pokročilé koncepty dělení kódu

Jednou pokročilou technikou, kterou můžete povolit při rozdělování kódu, jsou přechody. The useTransition() hook vám umožňuje provádět neurgentní aktualizace, které nezmění vaše uživatelské rozhraní, dokud se aktualizace nedokončí.

Nejprve importujte háček:

import {useTransition} z"reagovat"

Pak zavoláte háček, který se vrátí isPending a startTransition:

konst [isPending, startTransition] = useTransition()

Nakonec dovnitř zabalte kód pro aktualizaci vašeho stavu startTransition():

startTransition(() => {
 setIsAdmin((předchozí) => !předchozí)
})

Nyní vaše skutečné uživatelské rozhraní nebude zobrazovat záložní hodnotu (text načítání), dokud prohlížeč nedokončí přechod. To znamená, že bude čekat, až prohlížeč stáhne všechna data správce, než se vůbec pokusí nějaká data zobrazit.

Další způsoby, jak optimalizovat výkon React

Tento článek se zabýval rozdělením kódu jako metodou pro zlepšení výkonu vašich aplikací React. Existuje však také několik dalších metod, které vám mohou poskytnout potřebné znalosti k vytváření robustních aplikací.