in JavaScript, React

Quando mi sono avvicinato per la prima volta alle applicazioni lato client mi è venuto spontaneo pormi alcune domande sulle performance.

Molti sviluppatori che producono i template front-end server side non si preoccupano più di tanto di questo aspetto, in quanto il server elabora le pagine molto più velocemente del client e molto spesso applicazioni di questo tipo sono MPA (Multi Page Application).

In un contesto client e per di più SPA (Single Page Application) la musica cambia abbastanza rapidamente.

Il miglior modo per creare un’applicazione rapida ed efficiente è pensare che il client sia vostro nemico, giocherà sempre contro di voi a causa delle “limitate” risorse che offre.

Prendiamo ora un caso di esempio basato su React, immaginiamo dunque di avere una web app client side, contenente un componente che verrà restituito tramite una condizione logia (ad esempio la modifica di uno State). Il risultato finale potrebbe essere:

MyAwesomeComponent in questo caso verrà incluso nel Bundle di WebPack (se avete utilizzato ad esempio il React Create App) anche se in realtà l’utente potrebbe non visualizzarlo mai, considerato che lo State ConditionalRender potrebbe non essere modificato. In questo specifico caso il risparmio sarà di qualche kilobyte, ma in applicazioni più grandi, obbligheremo l’utente a scaricare anche elementi che effettivamente non sono presenti nella view attuale, aumentando così sempre di più il page load.

Quello che possiamo fare per recuperare terreno è utilizzare i Dynamic import.

L’idea di base è suddividere i componenti che non vogliamo che vengano caricati nel bundle principale in vari chunks (pezzi). Sarà quindi necessario sviluppare un componente HOC (Higher-Order Components) per effettuare le chiamate ai vari componenti esterni al pacchetto:

Questo componente HOC andrà in realtà a chiamare il componente reale attraverso una .then() .

Quando andremo ad importare il nostro componente il codice potrebbe essere:

E’ possibile notare come MyAwesomeComponent viene importato dentro una funzione come se fosse un argomento. In fase di production build WebPack creerà un file chunk grazie al nested import del nostro componente:

() => import('./components/MyAwesomeComponent')

Questa tecnica può essere utilizzata anche all’interno delle rotte, nel caso di react-router-dom ad esempio, sarà sufficiente passare la costante MyAwesomeComponent all’interno della Route in questo modo:

<Route path="/example" component={MyAwesomeComponent} />

Ora, una volta lanciato il comando yarn build o npm run build a seconda del manager che utilizzate, potrete vedere il vostro file chunk nella cartella di build.

Se aprite la vostra configurazione WebPack di production è possibile vedere la porzione di codice che crea i nostri file chunk:

Lanciando ora la vostra applicazione, noterete che all’interno del network verrà effettuata una chiamata quando lo state della vostra applicazione verrà modificato.

Grazie a questa tecnica ottimizzeremo la nostra applicazione diminuendo la dimensione del bundle e fornendo all’utente solamente quello che sta realmente visualizzando.

Nella versione di React 16.6, è possibile “splittare” la tua applicazione grazie ad una nuova e semplice funzionalità! Ti consiglio di leggere il mio articolo in merito: Come fare Code Splitting con React e Suspense

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!