in JavaScript, React

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 “chunck” per renderla più performante.

Recentemente però il mitico 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:

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à:

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.

Se hai letto tutto l’articolo ti faccio i miei complimenti! Hai imparato le basi del Code Splitting! Condivi questo articolo e commenta per motivarmi a scriverne altri, grazie!