Túl lassú vagy túl sokáig tart a React alkalmazás betöltése? Ha igen, érdemes a kódfelosztásnak nevezett technikát használni. Ez a technika nagyon hatékonyan javítja a React alkalmazások betöltési sebességét és teljesítményét. De mi is az a kódfelosztás? És hogyan történik?

Mi az a kódfelosztás?

Egy tipikus React alkalmazás több tucat komponensből (és kódból) áll. A legtöbb összetevőt azonban nem kell betöltenie, amikor először tölti be őket. A kódfelosztás azt jelenti, hogy fel kell osztani az alkalmazás különböző részeit, és csak szükség esetén kell betölteni őket. Ez sokkal hatékonyabb, mintha a teljes alkalmazást egyszerre töltené be.

Vegyünk egy React alkalmazást, amelynek három oldala van: a kezdőlap, a névjegyoldal és a termékek oldala. Amikor a kezdőlapon van, nincs értelme betölteni a névjegy vagy a termékek oldalát. Mert valójában még nem vagy azokon az oldalakon. A kódfelosztás lényege, hogy csak akkor töltse be a kódot, amikor szükség van rá.

Nyisson meg egy weboldalt a böngészőjében, majd nyissa meg a DevTools alkalmazást (a billentyűzet F12 gombjával megnyithatja a Google Chrome böngészőben). Ezután lépjen a Forrás lapra. Itt megtalálja az oldalra navigálás során letöltött összes kódot. A kód felosztása nélkül a böngésző letölti a projektben lévő összes fájlt a kezdeti oldalbetöltéskor. Ez lelassíthatja webhelyét, ha sok fájlt tartalmaz.

A kódfelosztás különösen hasznossá válik, amikor a projekt egyre nagyobb és nagyobb lesz. Ennek az az oka, hogy a teljes alkalmazásfájl letöltése egyszerre nagyon sokáig tarthat. Tehát ennek a felosztása nagyon hasznos lesz.

A kódfelosztás legjobb része az, hogy késleltetheti az összetevők és a funkciók betöltését. A miénk bevezető útmutató a ReactJS-hez részletesen elmagyarázza az alkatrészeket és a funkciókat, ha frissítésre van szüksége.

Kódfelosztási funkciók: Dinamikus importálás használata

Vegye figyelembe a következő helyzetet. Azt szeretné, ha a kezdőlapján lenne egy gomb. Amikor rákattint a gombra, figyelmeztetni szeretné a 2 és 2 összegét (ami 4). Tehát létrehoz egy Home.js összetevőt, és meghatározza a kezdőlap nézetét.

Ebben az esetben két lehetőség közül választhat. Először is importálhatja a kódot a számok hozzáadásához a tetején Home.js fájlt. De itt van a probléma. Ha a fájl tetején lévő függvényt importálná, akkor a kód akkor is betöltődik, ha nem kattintott a gombra. Jobb megközelítés lesz betölteni a összeg() csak akkor működik, ha rákattint a gombra.

Ennek eléréséhez dinamikus importálást kell végrehajtania. Ez azt jelenti, hogy importálni fogja a összeg() funkció inline a gombelemben. Íme a kód ugyanerre:

exportalapértelmezettfunkcióitthon() { 
Visszatérés ( 
"Itthon"> 
Főoldal</h1>
 {
import("../sum.js").akkor((modult) => {
 éber(modult.összeg(2, 2))
 })
 }}
 >
 Adja össze a két számot
 </button> 
 </div> 
 ); 
}

Most a böngésző csak letölti a sum.js modult, ha rákattint a gombra. Ez javítja a kezdőlap betöltési idejét.

Kódfelosztó komponensek: React.lazy és Suspense használata

A React összetevőit a következővel oszthatja fel lusta() funkció. A legjobb hely a kódfelosztás végrehajtására az útválasztó belsejében lenne. Mert itt képezheti le az összetevőket az útvonalakhoz az alkalmazásban. Útmutatónkat itt olvashatja hogyan készítsünk egyoldalas alkalmazást a React Routerrel ha frissítőre van szüksége.

Tegyük fel, hogy az alkalmazásod rendelkezik a itthon, Ról ről, és Termékek összetevő. Amikor a itthon komponens, nincs értelme betölteni a Ról ről komponens vagy a Termékek összetevő. Tehát el kell választani őket a itthon útvonal. A következő kód bemutatja, hogyan lehet ezt elérni:

Először is importálnia kell a szükséges funkciókat és összetevőket a reagál és react-router-dom modulok:

import { Routes, Route, Outlet, Link } tól től"react-router-dom";
import { lusta, feszültség } tól től"reagál";

Ezután dinamikusan kell importálnia az összetevőket a lusta() funkció:

const Otthon = lusta(() =>import("./components/Home"));
const About = lusta(() =>import("./components/Névjegy"));
const Termékek = lusta(() =>import("./components/Products"));

Ezután állítsa be az elrendezést (navigációs menü). Használja a komponens az aktuális útvonalnak megfelelő összetevő megjelenítéséhez (itthon, Ról ről, vagy Termékek összetevő):

funkcióNavWrapper() {
Visszatérés (
 <>

Látható, hogy az alkatrészeket becsomagoljuk. Ez azt mondja a Reactnek, hogy minden benne van lustán betölthető, ami azt jelenti, hogy nem biztos, hogy azonnal elérhető. Emiatt a Suspense alkatrésznek van egy tartalék ingatlan. Esetünkben az érték egy egyszerű szöveg, amely azt mondja, hogy "Betöltés...". Tehát az egyes oldalak letöltése közben a képernyőn a betöltés felirat jelenik meg.

Végül állítsa be az útvonalat:

exportalapértelmezettfunkcióApp() {
Visszatérés (

"/" elem={}>
"/" elem={} />
"/Termékek" elem={} />
"/ról ről" elem={} />
 </Route>
 </Routes>
 );
}

Most, amikor meglátogatja a kezdőlapot, a böngésző csak a Home.js fájlt. Ugyanígy, ha rákattint a Ról ről hivatkozást a navigációs menüben a Névjegy oldal meglátogatásához, a böngésző csak a About.js fájlt. Ugyanez vonatkozik a Termékek oldalra is.

Feltételes kódfelosztás

Gyakran előfordulhat, hogy az oldalon olyan tartalom található, amely csak bizonyos felhasználókra vonatkozik. Például a kezdőlapján rendelkezhet egy olyan adminisztrátori adatokat tartalmazó szakaszsal, amely kizárólag az adminisztrátor felhasználók számára áll rendelkezésre. Ez lehet egy adminisztrátori irányítópult, amely megjelenik az adminisztrátor felhasználók számára, de nem a normál felhasználók számára.

Ebben az esetben nem szeretné minden alkalommal megjeleníteni az összes adatot. Ebben az esetben használhatja a kódfelosztási technikát annak biztosítására, hogy csak akkor jelenítse meg ezeket az információkat, ha ez a személy rendszergazda.

Így nézne ki a kód:

import { lusta, feszültség } tól től"reagál";
const AdminData = lazy(() =>import("./AdminData"));
exportalapértelmezettfunkcióitthon() { 
const [isAdmin, setIsAdmin] = useState(hamis)
Visszatérés ( 

"Itthon"> 
Főoldal</h1>
 setIsAdmin(előz => !előző)}>
 Kapcsolja be az Adminisztrációt
 </button> 

Betöltés...</h1>}>
 {isAdmin? <AdminData />: <h2> Nem az Adminisztrátor h2>} 
 </Suspense>
 </div> 
 ); 
}

Most, amikor a váltógombra kattint, is Admin értékre lesz beállítva igaz. Ennek eredményeként az alkalmazás megjeleníti a amit lustán betöltenek. De ha nem adminisztrátor felhasználó, akkor az alkalmazás soha nem fog letöltődni AdminData.js mert nem lesz rá szükség.

A feltételes kódfelosztás ugyanazt a fogalmat használja, mint feltételes megjelenítés a Reactban.

Speciális kódfelosztási koncepciók

Az egyik fejlett technika, amelyet a kód felosztása során engedélyezhet, az átmenetek. A useTransition() hook lehetővé teszi, hogy nem sürgős frissítéseket hajtson végre, amelyek nem változtatják meg a felhasználói felületet, amíg a frissítés be nem fejeződik.

Először importálja a horgot:

import {useTransition} tól től"reagál"

Aztán hívod a horgot, ami visszatér függőben van és startTransition:

const [isPending, startTransition] = useTransition()

Végül csomagolja be az állapot frissítéséhez szükséges kódot startTransition():

startTransition(() => {
 setIsAdmin((előz) => !előző)
})

Most a tényleges felhasználói felület nem fogja megjeleníteni a tartalék értéket (a betöltési szöveget), amíg a böngésző be nem fejezi az átállást. Ez azt jelenti, hogy megvárja, amíg a böngésző letölti a teljes rendszergazdai adatot, mielőtt egyáltalán megpróbálna megjeleníteni adatokat.

A React teljesítmény optimalizálásának egyéb módjai

Ez a cikk a kódfelosztással foglalkozik, mint a React-alkalmazások teljesítményének javítására szolgáló módszerrel. De számos más módszer is megadja a szükséges ismereteket robusztus alkalmazások létrehozásához.