Come fare Code Splitting con React e Suspense

13/11/2018

Se leggi questo blog probabilmente avrai notato la mia particolare attenzione alle performance verso le applicazioni client. Infatti tempo addietro ho pubblicato l’articolo: Come fare Code Splitting con React e WebPack.

Parlavo appunto della possibilità di “splittare” la propria applicazione in piccoli “chuncks” per renderla più performante.

Recentemente però il team di React ha aggiunto la possibilità di importare dinamicamente i componenti grazie a lazy, per poi richiamarli con Suspense. Questa nuova funzionalità semplifica ancora di più la procedura esaminata nel precedentemente articolo.

Ci tengo a precisare che questo post fa riferimento alla versione 16.6 di React. Quindi se è necessario aggiornare la libreria.

Vediamo dunque nel dettaglio come è possibile utilizzare questa nuova funzionalità di React.

Prima di tutto dobbiamo importare nel nostro componente, Suspense:

import React, { Component, Suspense } from 'react';

Immaginiamo dunque, di voler importare un componente React, la sintassi tradizionale come volti di voi sapranno, è la seguente:

import Prodotti from './containers/Prodotti';

Se volessimo invece caricarlo dinamicamente, dovremmo utilizzare appunto lazy. A questo punto la sintassi dovrebbe essere:

const Prodotti = React.lazy(() => import('./containers/Prodotti'));

Come avrete notato abbiamo associato il componente ad una costante, passandolo come argomento a lazy, che permette di importarlo dinamicamente.

Dopoché possiamo richiamare il componente (ad esempio all’interno di una rotta con il metodo render) grazie a Suspense:

<Route
 path="/prodotti"
 render={() => (
   <Suspense fallback={<div>Caricamento...</div>}>
     <Prodotti />
   </Suspense>
 )}
/>

Prima di Suspense era necessario creare un componente HOC (higher-order component) che “wrappava” il componente importato. Ora possiamo farlo automaticamente, ed è anche possibile mostrare un messaggio di caricamento in una fallback direttamente gestita da Suspense.

Naturalmente è possibile richiamare il componente anche al di fuori delle rotte con molta facilità:

{this.state.prodotti &&
  <Suspense fallback={<div>Caricamento...</div>}>
    <Prodotti/>
  </Suspense>
}

Insomma, per quanto mi riguarda queste novità rendono ancora più fruibili concetti come il code splitting avvicinandoli anche ad utenti novizi a questa libreria.

E’ importante sapere che: suddividere tutta l’applicazione in chunk è controproducente in quando obbligheremo l’utente a effettuare chiamate ad altri file senza motivo. L’applicativo sarà più piccolo in termini di dimensione, ma più lento in termini di caricamento a causa della risposta.


Eugenio Segala

Engineering lead, technologist, and dreamer.
Follow me on GitHub, LinkedIn and Instagram.

Un giorno le macchine riusciranno a risolvere tutti i problemi, ma mai nessuna di esse potrà porne uno - Albert Einstein