Controllare la pesantezza del javascript nel tuo sito

Torniamo a parlare di Barco Reale e del suo sviluppo.

Oggi il focus è sul bundle size.

Innanzitutto, cos’è il bundle?

Come visto nel precedente articolo sull’utilizzo di JQuery, il codice javascript che abbiamo scritto, suddividendolo in molti file, e tutte le dipendenze che abbiamo usato verranno unite in uno o più file: questi sono i bundle.

Esistono diverse configurazioni per ottenere questo risultato, noi abbiamo scelto di avere un file javascript per ogni pagina (alcune pagine condividono lo stesso file javascript poiché si pongono lo stesso obiettivo finale).

Ho prestato un’attenzione che definirei snervante al peso del bundle finale, questo perché un bundle molto pesante influisce in modo negativo su numerosi aspetti del sito, per esempio indicizzazione, velocità  di caricamento e tempo necessario affinché la pagina sia interattiva per l’utente.

Per tenere sotto controllo il peso di questi file ci vengono in aiuto alcuni tool: vediamo quelli che abbiamo usato e una loro veloce configurazione.

1) Webpack Bundle Analyzer

Il primo tool che vediamo è un plugin per webpack (per saperne di più consulta l’articolo precedente), questo plugin ci permette di capire quanto il nostro codice e  ogni dipendenza che abbiamo usato influiscano nel peso finale attraverso una pagina web interattiva (o un file json).

Utilizzarlo è semplicissimo:

Dobbiamo importare il plugin all’inizio del nostro file di configurazione per webpack

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

Successivamente, lo inseriamo nei plugin che utilizziamo

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

 

Non ci rimane che eseguire webpack. Alla fine dell’esecuzione ci verrà aperta una nuova scheda sul nostro browser con una mappa simile a questa: 

 

Dall’immagine possiamo vedere subito che lodash impatta moltissimo sul nostro bundle, moment invece un po' meno.

Dai risultati ottenuti si può subito capire se alcune dipendenze impattano troppo e nel caso sostituirle con altre dal peso più contenuto.

Ad esempio su BarcoReale ho preferito utilizzare dayjs con un peso di 2.8kb (gzippato) invece di momentjs con un peso di 70.4kb (gzippato) (dati ottenuti attraverso bundlephobia).

L’uso di questo plugin mi ha segnalato anche che aggiornando una dipendenza  il suo peso era enormemente aumentato (a causa dei polyfill) e quindi mi ha permesso di sceglierne una versione più vecchia, ma comunque sicura e performante.

2) SizePlugin

Anche questo è un plugin per webpack (disponibile anche per altri bundlers) che ci fornisce indicazioni sul peso di ogni nostro bundle considerando la compressione gzip.

Come per il precedente plugin aggiungerlo a webpack è velocissimo.

Lo includiamo :

const SizePlugin = require('size-plugin')

E lo includiamo nei plugin che utilizziamo:

module.exports = {
  plugins: [
    new SizePlugin()
  ]
}

Eseguendo webpack avremo un output dettagliato sul peso dei nostri bundle. Ecco  un esempio applicato proprio a Barco Reale. 

In aggiunta SizePlugin ci segnala anche di quanto il nostro bundle è aumentato e ci mostra visivamente con dei colori se il peso del file è eccessivo, nella media o buono.

Questo plugin crea anche un file chiamato size-plugin.json che memorizza per ogni build il peso dei nostri file, diventando così un diario molto prezioso per ricostruire, magari dopo qualche giorno o mese, la storia dei nostri file.

3) Coverage (Chrome)

Il browser Chrome (ma tanti altri browser hanno una funzione similare) ci può dire quanto codice javascript nel bundle viene effettivamente utilizzato.

Accedere a questa funzione non è difficile: è necessario aprire gli strumenti per sviluppatori e successivamente navigando i tre puntini laterali scegliere i tool aggiuntivi e in fine la voce coverage.

A questo punto basta cliccare il pulsante di refresh su gli strumenti per sviluppatori e il gioco è fatto!

 

Questi sono alcuni tool che ho utilizzato per controllare passo passo i vari bundle, per questa seconda tappa è tutto!