Scopri come la suddivisione del codice può migliorare le prestazioni e la velocità della tua applicazione React.

La tua applicazione React è troppo lenta o impiega troppo tempo a caricarsi? In tal caso, potresti voler utilizzare una tecnica nota come suddivisione del codice. Questa tecnica è molto efficace per migliorare la velocità di caricamento e le prestazioni delle applicazioni React. Ma cos'è la suddivisione del codice? E come si fa?

Cos'è la suddivisione del codice?

Una tipica applicazione React comprende dozzine di componenti (e codice). Ma non è necessario caricare la maggior parte di questi componenti quando li carichi per la prima volta. La suddivisione del codice comporta la suddivisione delle diverse parti dell'applicazione e il loro caricamento solo quando necessario. Questo è molto più efficiente rispetto al caricamento dell'intera applicazione in una sola volta.

Considera un'applicazione React che ha tre pagine: la home page, la pagina delle informazioni e la pagina dei prodotti. Quando sei sulla home page, non ha senso caricare la pagina delle informazioni o la pagina dei prodotti. Perché in realtà non sei ancora su quelle pagine. L'idea della suddivisione del codice è assicurarsi di caricare il codice solo quando è necessario.

instagram viewer

Apri una pagina web sul tuo browser web, quindi apri DevTools (puoi fare clic su F12 sulla tastiera per aprirlo su Google Chrome). Successivamente, vai alla scheda Sorgente. Lì troverai tutto il codice che viene scaricato mentre accedi alla pagina. Senza la suddivisione del codice, il browser scarica tutti i file nel progetto al caricamento iniziale della pagina. Questo può rallentare il tuo sito web se contiene molti file.

La suddivisione del codice diventa particolarmente utile quando il tuo progetto inizia a diventare sempre più grande. Questo perché il download di tutti i file dell'applicazione in una sola volta può richiedere molto tempo. Quindi dividerlo sarà piuttosto vantaggioso.

La parte migliore della suddivisione del codice è che puoi ritardare il caricamento di componenti e funzioni. Nostro guida introduttiva su ReactJS spiega in modo approfondito i componenti e le funzioni nel caso abbiate bisogno di un ripasso.

Funzioni di suddivisione del codice: utilizzo dell'importazione dinamica

Considera la seguente situazione. Vuoi che la tua home page abbia un pulsante. Quando fai clic sul pulsante, vuoi avvisare della somma di 2 e 2 (che è 4). Quindi crei un file Home.js componente e definisci la visualizzazione della tua home page.

In questo caso, hai due opzioni. Innanzitutto, puoi importare il codice per aggiungere i numeri nella parte superiore del file Home.js file. Ma ecco il problema. Se dovessi importare la funzione nella parte superiore del file, il codice verrà caricato anche se non hai fatto clic sul pulsante. Un approccio migliore sarà quello di caricare il file somma() funzionano solo quando si fa clic sul pulsante.

Per raggiungere questo obiettivo, dovrai eseguire un'importazione dinamica. Ciò significa che importerai il file somma() function inline nell'elemento button. Ecco il codice per lo stesso:

esportarepredefinitofunzioneCasa() { 
ritorno (
"Casa">

Pagina iniziale</h1>

Ora il browser scaricherà solo il file somma.js modulo quando si fa clic sul pulsante. Ciò migliora il tempo di caricamento della home page.

Componenti di suddivisione del codice: utilizzo di React.lazy e Suspense

Puoi dividere i componenti in React usando il file Pigro() funzione. Il posto migliore per eseguire la suddivisione del codice sarebbe all'interno del router. Perché è qui che mappi i componenti ai percorsi nella tua applicazione. Puoi leggere la nostra guida su come creare un'app a pagina singola con React Router se hai bisogno di un ripasso.

Supponiamo che la tua app abbia un'estensione Casa, Di, E Prodotti componente. Quando sei al Casa componente, non ha senso caricare il file Di componente o il Prodotti componente. Quindi è necessario separarli dal file Casa itinerario. Il codice seguente mostra come ottenere ciò:

Innanzitutto, è necessario importare le funzioni e i componenti richiesti dal file reagire E reagisci-router-dom moduli:

importare { Percorsi, Percorso, Outlet, Link } da"reagire-router-dom";
importare { pigro, Suspense } da"reagire";

Successivamente, è necessario importare i componenti in modo dinamico utilizzando il file Pigro() funzione:

cost Casa = pigro(() =>importare("./componenti/Home"));
cost Circa = pigro(() =>importare("./componenti/Informazioni"));
cost Prodotti = pigro(() =>importare("./componenti/Prodotti"));

Successivamente, imposta il layout (menu di navigazione). Usa il component per rendere il componente che corrisponde al percorso corrente (Casa, Di, O Prodotti componente):

funzioneNavWrapper() {
ritorno (
<>

Puoi vedere che avvolgiamo i componenti all'interno. Questo dice a React che tutto dentro ha il potenziale per essere caricato pigramente, il che significa che potrebbe non essere disponibile immediatamente. Per questo motivo il Suspense componente ha a ricaderci proprietà. Nel nostro caso, il valore è un semplice testo che dice "Caricamento in corso...". Quindi, mentre ciascuna delle pagine viene scaricata, dirà caricamento sullo schermo.

Infine, imposta il percorso:

esportarepredefinitofunzioneApp() {
ritorno (

"/" elemento={}>
"/" elemento={} />
"/prodotti" elemento={} />
"/Di" elemento={} />
</Route>
</Routes>
);
}

Ora quando visiti la home page, il browser carica solo il file Home.js file. Allo stesso modo, quando si fa clic sul file Di link nel menu di navigazione per visitare la pagina About, il browser carica solo il file Informazioni su.js file. Questo è lo stesso per la pagina Prodotti.

Divisione del codice condizionale

Spesso potresti avere contenuti sulla tua pagina che sono applicabili solo a determinati utenti. Ad esempio, sulla tua home page, puoi avere una sezione con dati di amministrazione esclusivi per gli utenti amministratori. Potrebbe trattarsi di una dashboard di amministrazione che viene visualizzata per gli utenti amministratori, ma non per gli utenti normali.

In questo caso, non vorrai mostrare tutti quei dati ogni volta. In questo caso, puoi utilizzare la tecnica di suddivisione del codice per assicurarti di mostrare tali informazioni solo se questa persona è un amministratore.

Ecco come sarebbe il codice:

importare { pigro, Suspense } da"reagire";
cost AdminData = pigro(() =>importare("./AdminData"));

esportarepredefinitofunzioneCasa() {
cost [isAdmin, setIsAdmin] = useState(falso)

ritorno (

"Casa">

Pagina iniziale</h1>

Caricamento...</h1>}>
{isAdmin? <AdminData />: <h2> Non l'amministratore h2>}
</Suspense>
</div>
 );
}

Ora, quando fai clic sul pulsante di attivazione/disattivazione, isAdmin sarà impostato su VERO. Di conseguenza, l'app mostrerà il file che viene caricato pigramente. Ma se non sei un utente amministratore, l'app non verrà mai scaricata AdminData.js perché non ne avrà bisogno.

La suddivisione del codice condizionale utilizza lo stesso concetto di rendering condizionale in React.

Concetti avanzati di suddivisione del codice

Una tecnica avanzata che puoi abilitare quando dividi il codice sono le transizioni. IL usaTransizione() hook ti consente di eseguire aggiornamenti non urgenti che non cambieranno la tua interfaccia utente fino al termine dell'aggiornamento.

Innanzitutto, importi l'hook:

importare {useTransition} da"reagire"

Quindi chiami il gancio, che ritorna È in sospeso E startTransition:

cost [isPending, startTransition] = useTransition()

Infine, avvolgi il codice per aggiornare il tuo stato all'interno inizioTransizione():

inizioTransizione(() => {
setIsAdmin((prec) => !precedente)
})

Ora la tua interfaccia utente effettiva non visualizzerà il valore di fallback (il testo di caricamento) fino a quando il browser non avrà completato la transizione. Ciò significa che attenderà che il browser scarichi tutti i dati di amministrazione prima di provare a mostrare qualsiasi dato.

Altri modi per ottimizzare le prestazioni di React

Questo articolo trattava la suddivisione del codice come metodo per migliorare le prestazioni delle tue applicazioni React. Ma ci sono anche molti altri metodi che possono fornirti le conoscenze necessarie per creare applicazioni robuste.