Ar jūsų „React“ programa per lėta arba per ilgai įkeliama? Jei taip, galbūt norėsite naudoti metodą, vadinamą kodo padalijimu. Ši technika yra labai efektyvi gerinant React programų apkrovos greitį ir našumą. Bet kas yra kodo padalijimas? Ir kaip tai daroma?

Kas yra kodo padalijimas?

Įprastą „React“ programą sudaro daugybė komponentų (ir kodo). Tačiau jums nereikia įkelti daugumos šių komponentų, kai įkeliate juos pirmą kartą. Kodo padalijimas reiškia, kad atskiriamos skirtingos programos dalys ir įkeliamos tik tada, kai reikia. Tai daug efektyviau nei įkelti visą programą vienu metu.

Apsvarstykite „React“ programą, kurią sudaro trys puslapiai: pagrindinis puslapis, puslapis apie ir produktų puslapis. Kai esate pagrindiniame puslapyje, nėra prasmės įkelti puslapio apie arba produktų puslapį. Nes jūs iš tikrųjų dar nesate tuose puslapiuose. Kodo padalijimo idėja yra užtikrinti, kad kodą įkeltumėte tik tada, kai jo reikia.

Atidarykite tinklalapį žiniatinklio naršyklėje, tada atidarykite DevTools (galite spustelėti F12 klaviatūroje, kad atidarytumėte jį „Google Chrome“). Tada eikite į skirtuką Šaltinis. Ten rasite visą kodą, kuris atsisiųstas naršant į puslapį. Neskaidydama kodo, naršyklė atsisiunčia visus jūsų projekto failus pradinio puslapio įkėlimo metu. Tai gali sulėtinti jūsų svetainę, jei joje yra daug failų.

Kodo padalijimas tampa ypač naudingas, kai jūsų projektas tampa vis didesnis ir didesnis. Taip yra todėl, kad visų programos failų atsisiuntimas vienu metu gali užtrukti labai ilgai. Taigi padalijimas bus gana naudingas.

Geriausia kodo padalijimo dalis yra ta, kad galite atidėti komponentų ir funkcijų įkėlimą. Mūsų įvadinis „ReactJS“ vadovas išsamiai paaiškina komponentus ir funkcijas, jei prireiktų atnaujinimo.

Kodo padalijimo funkcijos: dinaminio importavimo naudojimas

Apsvarstykite toliau pateiktą situaciją. Norite, kad jūsų pagrindiniame puslapyje būtų mygtukas. Kai paspausite mygtuką, norite įspėti 2 ir 2 sumą (tai yra 4). Taigi jūs sukuriate a Home.js komponentą ir apibrėžkite pagrindinio puslapio rodinį.

Šiuo atveju turite dvi parinktis. Pirma, galite importuoti kodą, kad pridėtumėte skaičius viršuje Home.js failą. Bet čia yra problema. Jei importuotumėte failo viršuje esančią funkciją, kodas bus įkeltas net ir nespustelėjus mygtuko. Geresnis būdas bus įkelti suma() veikia tik spustelėjus mygtuką.

Norėdami tai pasiekti, turėsite atlikti dinaminį importavimą. Tai reiškia, kad importuosite suma() funkcija mygtuko elemente. Štai to paties kodas:

eksportuotinumatytasfunkcijaNamai() { 
grąžinti ( 
"Namai"> 
Pagrindinis puslapis</h1>
 {
importuoti("../sum.js").tada((modulis) => {
 budrus(modulis.suma(2, 2))
 })
 }}
 >
 Sumuokite abu skaičius
 </button> 
 </div> 
 ); 
}

Dabar naršyklė atsisiųs tik suma.js modulį, kai paspausite mygtuką. Tai pagerina pagrindinio puslapio įkėlimo laiką.

Kodo padalijimo komponentai: React.lazy ir Suspense naudojimas

Galite padalinti „React“ komponentus naudodami tinginys () funkcija. Geriausia vieta kodo padalijimui būtų maršrutizatoriaus viduje. Nes čia galite susieti komponentus su maršrutais savo programoje. Galite perskaityti mūsų vadovą kaip sukurti vieno puslapio programą naudojant „React Router“. jei reikia atsinaujinimo.

Tarkime, kad jūsų programoje yra a Namai, Apie, ir Produktai komponentas. Kai esate prie Namai komponentas, nėra prasmės įkelti Apie komponentas arba Produktai komponentas. Taigi jūs turite juos atskirti nuo Namai maršrutą. Šis kodas parodo, kaip tai pasiekti:

Pirmiausia turite importuoti reikiamas funkcijas ir komponentus iš reaguoti ir react-router-dom moduliai:

importuoti { Maršrutai, maršrutas, išėjimas, nuoroda } iš"react-router-dom";
importuoti { tinginys, įtampa } iš"reaguoti";

Tada turite dinamiškai importuoti komponentus naudodami tinginys () funkcija:

konst Namai = tinginys (() =>importuoti("./components/Home"));
konst Apie = tinginys(() =>importuoti("./components/Apie"));
konst Produktai = tinginys(() =>importuoti("./components/Produktai"));

Tada nustatykite išdėstymą (naršymo meniu). Naudoti komponentas, kad būtų pateiktas komponentas, atitinkantis dabartinį maršrutą (Namai, Apie, arba Produktai komponentas):

funkcijaNavWrapper() {
grąžinti (
 <>

Matote, kad komponentus suvyniojame į vidų. Tai sako „React“, kad viskas viduje gali būti tingiai įkeliamas, o tai reiškia, kad jis gali būti nepasiekiamas iš karto. Dėl šios priežasties, Įtampa komponentas turi a atsitraukti nuosavybė. Mūsų atveju reikšmė yra paprastas tekstas, kuriame parašyta „Įkeliama...“. Taigi, kol atsisiunčiamas kiekvienas puslapis, ekrane bus rodoma, kad įkeliama.

Galiausiai nustatykite maršrutą:

eksportuotinumatytasfunkcijaProgramėlė() {
grąžinti (

"/" element={}>
"/" element={} />
"/Produktai" element={} />
"/apie" element={} />
 </Route>
 </Routes>
 );
}

Dabar, kai lankotės pagrindiniame puslapyje, naršyklė įkelia tik Home.js failą. Lygiai taip pat, kai spustelėsite Apie naršymo meniu nuorodą, kad apsilankytumėte puslapyje Apie, naršyklė įkelia tik About.js failą. Tas pats pasakytina apie puslapį Produktai.

Sąlyginio kodo padalijimas

Dažnai jūsų puslapyje gali būti turinio, taikomo tik tam tikriems naudotojams. Pavyzdžiui, pagrindiniame puslapyje galite turėti skiltį su administratoriaus duomenimis, skirtą tik administratoriams. Tai gali būti administratoriaus prietaisų skydelis, kuris rodomas administratoriams, bet ne paprastiems vartotojams.

Tokiu atveju nenorėtumėte kiekvieną kartą rodyti visų tų duomenų. Tokiu atveju galite naudoti kodo padalijimo techniką, kad įsitikintumėte, jog tą informaciją rodote tik tuo atveju, jei šis asmuo yra administratorius.

Štai kaip atrodytų tas kodas:

importuoti { tinginys, įtampa } iš"reaguoti";
konst AdminData = tingus (() =>importuoti("./AdminData"));
eksportuotinumatytasfunkcijaNamai() { 
konst [isAdmin, setIsAdmin] = useState(klaidinga)
grąžinti ( 

"Namai"> 
Pagrindinis puslapis</h1>
 setIsAdmin(ankstesnė => !ankstesnis)}>
 Perjungti administratorių
 </button> 

Įkeliama...</h1>}>
 {isAdminas? <AdminData />: <h2> Ne administratorius h2>} 
 </Suspense>
 </div> 
 ); 
}

Dabar, kai spustelėsite perjungimo mygtuką, yra administratorius bus nustatytas į tiesa. Dėl to programa parodys kad tingiai kraunamasi. Bet jei nesate administratorius, programa niekada nebus atsisiųsta AdminData.js nes to neprireiks.

Sąlyginis kodo skaidymas naudoja tą pačią sąvoką kaip sąlyginis atvaizdavimas React.

Išplėstinės kodo skaidymo koncepcijos

Viena pažangi technika, kurią galite įjungti skaidydami kodą, yra perėjimai. The useTransition() „hook“ leidžia atlikti neskubius atnaujinimus, kurie nepakeis jūsų vartotojo sąsajos, kol nebus baigtas naujinimas.

Pirmiausia importuojate kabliuką:

importuoti {useTransition} iš"reaguoti"

Tada skambini kabliukas, kuris grįžta yra Laukiama ir pradėtiPerėjimas:

konst [isPending, startTransition] = useTransition()

Galiausiai įpakuokite kodą, kad atnaujintumėte savo būseną startTransition():

startTransition(() => {
 setIsAdmin((ankstesnė) => !ankstesnis)
})

Dabar jūsų tikroji vartotojo sąsaja nerodys atsarginės vertės (įkeliamo teksto), kol naršyklė nepabaigs perėjimo. Tai reiškia, kad ji ketina palaukti, kol naršyklė atsisiųs visus administratoriaus duomenis, prieš bandydama rodyti kokius nors duomenis.

Kiti reakcijos efektyvumo optimizavimo būdai

Šiame straipsnyje buvo aptartas kodo padalijimas kaip būdas pagerinti jūsų „React“ programų našumą. Tačiau yra ir keletas kitų metodų, kurie gali suteikti jums reikalingų žinių kuriant patikimas programas.