Aplicația dvs. React este prea lentă sau durează prea mult să se încarce? Dacă da, este posibil să doriți să utilizați o tehnică cunoscută sub numele de divizare a codului. Această tehnică este foarte eficientă în îmbunătățirea vitezei de încărcare și a performanței aplicațiilor React. Dar ce este împărțirea codului? Și cum se face?

Ce este divizarea codului?

O aplicație tipică React cuprinde zeci de componente (și cod). Dar nu trebuie să încărcați majoritatea acestor componente atunci când le încărcați pentru prima dată. Divizarea codului implică împărțirea diferitelor părți ale aplicației dvs. și încărcarea lor numai atunci când este necesar. Acest lucru este mult mai eficient decât încărcarea întregii aplicații simultan.

Luați în considerare o aplicație React care are trei pagini: pagina de pornire, pagina despre și pagina de produse. Când vă aflați pe pagina de pornire, nu are rost să încărcați pagina despre sau pagina de produse. Pentru că nu ești încă pe acele pagini. Ideea împărțirii codului este să vă asigurați că încărcați codul numai atunci când este necesar.

Deschideți o pagină web în browserul dvs. web, apoi deschideți DevTools (puteți face clic pe F12 de pe tastatură pentru a o deschide pe Google Chrome). Apoi, accesați fila Sursă. Acolo veți găsi tot codul care este descărcat pe măsură ce navigați la pagină. Fără divizarea codului, browserul descarcă toate fișierele din proiectul dvs. la încărcarea inițială a paginii. Acest lucru vă poate încetini site-ul dacă conține multe fișiere.

Împărțirea codului devine deosebit de utilă pe măsură ce proiectul tău începe să devină din ce în ce mai mare. Acest lucru se datorează faptului că descărcarea tuturor fișierelor aplicației simultan poate dura foarte mult timp. Deci împărțirea acesteia va fi destul de benefică.

Cea mai bună parte despre împărțirea codului este că puteți întârzia încărcarea componentelor, precum și a funcțiilor. Al nostru ghid introductiv pentru ReactJS explică componentele și funcțiile în profunzime în cazul în care aveți nevoie de o actualizare.

Funcții de împărțire a codului: Utilizarea importului dinamic

Luați în considerare următoarea situație. Vrei ca pagina ta de pornire să aibă un buton. Când faceți clic pe butonul, doriți să alertați suma 2 și 2 (care este 4). Deci creezi un Acasă.js componentă și definiți vizualizarea paginii dvs. de pornire.

În acest caz, aveți două opțiuni. În primul rând, puteți importa codul pentru adăugarea numerelor din partea de sus a Acasă.js fişier. Dar aici este problema. Dacă ar fi să importați funcția din partea de sus a fișierului, atunci codul se va încărca chiar și atunci când nu ați făcut clic pe butonul. O abordare mai bună va fi încărcarea sumă() funcţionează numai când faceţi clic pe butonul.

Pentru a realiza acest lucru, va trebui să efectuați un import dinamic. Aceasta înseamnă că veți importa sumă() funcția inline în elementul buton. Iată codul pentru același lucru:

exportMod implicitfuncţieAcasă() { 
întoarcere ( 
"Acasă"> 
Pagina de pornire</h1>
 {
import(„../sum.js”).apoi((modul) => {
 alerta(modul.sumă(2, 2))
 })
 }}
 >
 Însumați ambele numere
 </button> 
 </div> 
 ); 
}

Acum browserul va descărca doar sum.js modul atunci când faceți clic pe butonul. Acest lucru îmbunătățește timpul de încărcare a paginii de pornire.

Componente de divizare a codului: folosind React.lazy și Suspense

Puteți împărți componentele în React folosind leneş() funcţie. Cel mai bun loc pentru a efectua împărțirea codului ar fi în interiorul routerului. Deoarece aici mapați componentele la rute din aplicația dvs. Puteți citi ghidul nostru pe cum să construiți o aplicație cu o singură pagină cu React Router dacă aveți nevoie de o reîmprospătare.

Să presupunem că aplicația dvs. are un Acasă, Despre, și Produse componentă. Când ești la Acasă componentă, nu are rost să încărcați Despre componenta sau Produse componentă. Deci trebuie să le despărțiți de Acasă traseu. Următorul cod demonstrează cum se poate realiza acest lucru:

În primul rând, trebuie să importați funcțiile și componentele necesare din reacţiona și reacţionează-router-dom module:

import { Rute, Rută, Priză, Link } din"react-router-dom";
import { leneș, suspans } din"reacţiona";

În continuare, trebuie să importați componentele în mod dinamic folosind leneş() funcţie:

const Acasă = leneș(() =>import(„./components/Home”));
const Despre = leneș(() =>import(„./components/Despre”));
const Produse = leneș(() =>import(„./componente/Produse”));

Apoi, configurați aspectul (meniul de navigare). Folosește componentă pentru a reda componenta care corespunde rutei curente (Acasă, Despre, sau Produse componenta):

funcţieNavWrapper() {
întoarcere (
 <>

Puteți vedea că ambalăm componentele în interior. Aceasta îi spune lui React că totul înăuntru are potențialul de a fi încărcat leneș, ceea ce înseamnă că este posibil să nu fie disponibil imediat. Din acest motiv, Suspans componenta are a da înapoi proprietate. În cazul nostru, valoarea este un text simplu care spune „Se încarcă...”. Așadar, în timp ce fiecare dintre pagini este descărcată, pe ecran va spune încărcare.

În cele din urmă, configurați traseul:

exportMod implicitfuncţieApp() {
întoarcere (

"/" element={}>
"/" element={} />
"/produse" element={} />
"/despre" element={} />
 </Route>
 </Routes>
 );
}

Acum, când vizitați pagina de pornire, browserul încarcă numai Acasă.js fişier. În același mod, când dați clic pe Despre link din meniul de navigare pentru a vizita pagina Despre, browserul încarcă numai Despre.js fişier. Este același lucru pentru pagina Produse.

Împărțirea condiționată a codului

De multe ori este posibil să aveți conținut pe pagina dvs. care este aplicabil numai anumitor utilizatori. De exemplu, pe pagina dvs. de pornire, puteți avea o secțiune cu date de administrator care este exclusiv pentru utilizatorii admin. Acesta ar putea fi un tablou de bord administrativ care apare pentru utilizatorii admin, dar nu pentru utilizatorii normali.

În acest caz, nu ați dori să afișați toate acele date de fiecare dată. În acest caz, puteți utiliza tehnica de împărțire a codului pentru a vă asigura că afișați acele informații numai dacă această persoană este administrator.

Iată cum ar arăta acel cod:

import { leneș, suspans } din"reacţiona";
const AdminData = leneș(() =>import(„./AdminData”));
exportMod implicitfuncţieAcasă() { 
const [isAdmin, setIsAdmin] = useState(fals)
întoarcere ( 

"Acasă"> 
Pagina de pornire</h1>
 setIsAdmin(prev => !prev)}>
 Comutați Administrator
 </button> 

Se încarcă...</h1>}>
 {este Admin? <AdminDate />: <h2> Nu administratorul h2>} 
 </Suspense>
 </div> 
 ); 
}

Acum, când faceți clic pe butonul de comutare, isAdmin va fi setat la Adevărat. Ca rezultat, aplicația va afișa care se încarcă leneș. Dar dacă nu sunteți administrator, atunci aplicația nu se va descărca niciodată AdminData.js pentru că nu va avea nevoie.

Împărțirea condiționată a codului folosește același concept ca redare condiționată în React.

Concepte avansate de împărțire a codului

O tehnică avansată pe care o puteți activa atunci când diviți codul este tranzițiile. The useTransition() Hook vă permite să faceți actualizări non-urgente, care nu vă vor schimba interfața de utilizare până când nu se termină actualizarea.

Mai întâi, importați cârligul:

import {useTransition} din"reacţiona"

Apoi suni la cârlig, care se întoarce este in asteptare și startTransition:

const [este în așteptare, startTransition] = useTransition()

În cele din urmă, împachetați codul pentru actualizarea stării dvs. în interior startTransition():

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

Acum, interfața de utilizare reală nu va afișa valoarea de rezervă (textul de încărcare) până când browserul nu termină tranziția. Aceasta înseamnă că va aștepta ca browserul să descarce toate datele de administrator înainte de a încerca să afișeze orice date.

Alte moduri de a optimiza performanța React

Acest articol a tratat împărțirea codului ca metodă de îmbunătățire a performanței aplicațiilor dvs. React. Dar există și alte câteva metode care vă pot oferi cunoștințele necesare pentru a crea aplicații robuste.