Onko React-sovelluksesi liian hidas tai kestää liian kauan latautua? Jos näin on, saatat haluta käyttää tekniikkaa, joka tunnetaan nimellä koodin jakaminen. Tämä tekniikka on erittäin tehokas parantamaan React-sovellusten latausnopeutta ja suorituskykyä. Mutta mitä on koodin jakaminen? Ja miten se tehdään?

Mikä on koodin jakaminen?

Tyypillinen React-sovellus sisältää kymmeniä komponentteja (ja koodia). Sinun ei kuitenkaan tarvitse ladata useimpia näistä komponenteista, kun lataat ne ensimmäisen kerran. Koodin jakaminen tarkoittaa sovelluksen eri osien jakamista ja niiden lataamista vain tarvittaessa. Tämä on paljon tehokkaampaa kuin koko sovelluksen lataaminen kerralla.

Harkitse React-sovellusta, jossa on kolme sivua: kotisivu, tietosivu ja tuotesivu. Kun olet etusivulla, ei ole mitään järkeä ladata Tietoja-sivua tai tuotesivua. Koska et ole vielä näillä sivuilla. Koodin jakamisen ideana on varmistaa, että lataat koodin vain silloin, kun sitä tarvitaan.

Avaa verkkosivu selaimellasi ja avaa sitten DevTools (voit avata sen Google Chromessa napsauttamalla näppäimistön F12-näppäintä). Siirry seuraavaksi Lähde-välilehteen. Sieltä löydät kaiken koodin, joka on ladattu navigoidessasi sivulle. Ilman koodin jakamista selain lataa kaikki projektisi tiedostot ensimmäisellä sivulatauksella. Tämä voi hidastaa verkkosivustoasi, jos se sisältää paljon tiedostoja.

Koodin jakamisesta tulee erityisen hyödyllistä, kun projektisi alkaa kasvaa ja kasvaa. Tämä johtuu siitä, että kaikkien sovellustiedostojen lataaminen kerralla voi kestää hyvin kauan. Joten sen jakamisesta on varsin hyötyä.

Parasta koodin jakamisessa on, että voit viivyttää komponenttien ja toimintojen lataamista. Meidän ReactJS: n johdanto-opas selittää komponentit ja toiminnot perusteellisesti, jos tarvitset virkistystä.

Koodinjakotoiminnot: Dynaamisen tuonnin käyttäminen

Harkitse seuraavaa tilannetta. Haluat, että kotisivullasi on painike. Kun napsautat painiketta, haluat hälyttää 2:n ja 2:n summan (joka on 4). Joten luot a Home.js komponentti ja määritä etusivusi näkymä.

Tässä tapauksessa sinulla on kaksi vaihtoehtoa. Ensin voit tuoda koodin numeroiden lisäämistä varten Home.js tiedosto. Mutta tässä on ongelma. Jos tuot tiedoston yläreunassa olevan funktion, koodi latautuu, vaikka et olisi napsauttanut painiketta. Parempi tapa on ladata summa() toimii vain, kun napsautat painiketta.

Tämän saavuttamiseksi sinun on suoritettava dynaaminen tuonti. Tämä tarkoittaa, että tuot summa() toiminto painikeelementissä. Tässä on sama koodi:

viedäoletuksenatoimintoKoti() { 
palata ( 
"Koti"> 
Kotisivu</h1>
 {
tuonti("../sum.js").sitten((moduuli) => {
 hälytys (moduuli.summa(2, 2))
 })
 }}
 >
 Summaa molemmat luvut
 </button> 
 </div> 
 ); 
}

Nyt selain lataa vain summa.js moduulia, kun napsautat painiketta. Tämä parantaa kotisivun latausaikaa.

Koodijakokomponentit: React.lazyn ja Suspensen käyttö

Voit jakaa komponentteja Reactissa käyttämällä laiska() toiminto. Paras paikka koodin jakamiseen on reitittimen sisällä. Koska tässä kartat komponentit sovelluksesi reiteille. Voit lukea oppaamme osoitteessa kuinka rakentaa yksisivuinen sovellus React Routerilla jos tarvitset virkistystä.

Oletetaan, että sovelluksessasi on Koti, Noin, ja Tuotteet komponentti. Kun olet klo Koti komponenttia, ei ole mitään järkeä ladata Noin komponentti tai Tuotteet komponentti. Joten sinun on jaettava ne pois Koti reitti. Seuraava koodi osoittaa, kuinka tämä saavutetaan:

Ensin sinun on tuotava tarvittavat toiminnot ja komponentit tiedostosta reagoida ja react-router-dom moduulit:

tuonti { Reitit, reitti, lähtö, linkki } alkaen"react-router-dom";
tuonti { laiska, jännitys } alkaen"reagoi";

Seuraavaksi sinun on tuotava komponentit dynaamisesti käyttämällä laiska() toiminto:

konst Koti = laiska(() =>tuonti("./components/Home"));
konst Tietoja = laiska(() =>tuonti("./components/Tietoja"));
konst Tuotteet = laiska(() =>tuonti("./components/Products"));

Määritä seuraavaksi asettelu (navigointivalikko). Käytä komponentti renderöimään komponentti, joka vastaa nykyistä reittiä (Koti, Noin, tai Tuotteet komponentti):

toimintoNavWrapper() {
palata (
 <>

Näet, että käärimme komponentit sisään. Tämä kertoo Reactille, että kaikki sisällä on mahdollista ladata laiskasti, mikä tarkoittaa, että se ei välttämättä ole heti saatavilla. Tästä syystä Jännitystä komponentissa on a perääntyä omaisuutta. Meidän tapauksessamme arvo on yksinkertainen teksti, jossa lukee "Ladataan...". Joten kun kutakin sivua ladataan, näytöllä lukee latautuu.

Lopuksi määritä reitti:

viedäoletuksenatoimintoSovellus() {
palata (

"/" element={}>
"/" element={} />
"/Tuotteet" element={} />
"/noin" element={} />
 </Route>
 </Routes>
 );
}

Nyt kun vierailet kotisivulla, selain lataa vain Home.js tiedosto. Samalla tavalla, kun napsautat Noin -linkkiä siirtyäksesi Tietoja-sivulle, selain lataa vain About.js tiedosto. Sama koskee Tuotteet-sivua.

Ehdollinen koodin jakaminen

Usein sivullasi voi olla sisältöä, joka koskee vain tiettyjä käyttäjiä. Esimerkiksi etusivullasi voi olla osio, joka sisältää järjestelmänvalvojan tiedot, jotka ovat vain järjestelmänvalvojakäyttäjille. Tämä voi olla järjestelmänvalvojan hallintapaneeli, joka näkyy järjestelmänvalvojille, mutta ei tavallisille käyttäjille.

Tässä tapauksessa et halua näyttää kaikkia tietoja joka kerta. Tässä tapauksessa voit käyttää koodinjakotekniikkaa varmistaaksesi, että näytät tiedot vain, jos tämä henkilö on järjestelmänvalvoja.

Tältä koodi näyttäisi:

tuonti { laiska, jännitys } alkaen"reagoi";
konst AdminData = laiska(() =>tuonti("./AdminData"));
viedäoletuksenatoimintoKoti() { 
konst [isAdmin, setIsAdmin] = useState(väärä)
palata ( 

"Koti"> 
Kotisivu</h1>
 setIsAdmin(Ed => !edellinen)}>
 Vaihda järjestelmänvalvoja
 </button> 

Ladataan...</h1>}>
 {isAdmin? <AdminData />: <h2> Ei järjestelmänvalvoja h2>} 
 </Suspense>
 </div> 
 ); 
}

Nyt kun napsautat vaihtopainiketta, on Admin asetetaan totta. Tämän seurauksena sovellus näyttää jota ladataan laiskasti. Mutta jos et ole järjestelmänvalvoja, sovellus ei koskaan lataudu AdminData.js koska se ei sitä tarvitse.

Ehdollinen koodin jakaminen käyttää samaa käsitettä kuin ehdollinen renderöinti Reactissa.

Kehittyneet koodinjakokonseptit

Yksi edistynyt tekniikka, jonka voit ottaa käyttöön koodin jakamisessa, ovat siirtymät. The useTransition() koukun avulla voit tehdä ei-kiireellisiä päivityksiä, jotka eivät muuta käyttöliittymääsi ennen kuin päivitys on valmis.

Ensin tuot koukun:

tuonti {useTransition} alkaen"reagoi"

Sitten soitat koukkuun, joka palaa on odottamassa ja aloitaTransition:

konst [isPending, startTransition] = useTransition()

Lopuksi kääri koodi tilasi päivittämistä varten startTransition():

startTransition(() => {
 setIsAdmin((Ed) => !edellinen)
})

Nyt todellinen käyttöliittymäsi ei näytä vara-arvoa (lataustekstiä) ennen kuin selain on suorittanut siirtymän. Tämä tarkoittaa, että se odottaa, että selain lataa kaikki järjestelmänvalvojan tiedot, ennen kuin se yrittää näyttää mitään tietoja.

Muita tapoja optimoida reagointitehokkuutta

Tässä artikkelissa käsiteltiin koodin jakamista keinona parantaa React-sovellustesi suorituskykyä. Mutta on myös useita muita menetelmiä, jotka voivat antaa sinulle tarvittavan tiedon luotettavien sovellusten luomiseen.