Monitorare e analizzare l'app

Quali strumenti utilizzare per tenere traccia e analizzare il bundle webpack

Ivan Akulov

Anche se configuri webpack per ridurre al minimo le dimensioni dell'app, è comunque importante monitorarla e sapere cosa include. In caso contrario, puoi installare una dipendenza che renderà è due volte più grande e neanche se ne accorgerà.

Questa sezione descrive gli strumenti che ti aiutano a comprendere il tuo pacchetto.

Tieni traccia delle dimensioni del bundle

Per monitorare le dimensioni dell'app, usa webpack-dashboard durante lo sviluppo e bundlesize su CI.

dashboard-webpack

webpack-dashboard migliora l'output webpack con dimensioni delle dipendenze, avanzamento e altri dettagli. Ecco come funziona:

Questa dashboard aiuta a monitorare grandi dipendenze. Se ne aggiungi una, la vedrai immediatamente in nella sezione Moduli.

Per attivarlo, installa il pacchetto webpack-dashboard:

npm install webpack-dashboard --save-dev

Aggiungi il plug-in alla sezione plugins della configurazione:

// webpack.config.js
const DashboardPlugin = require('webpack-dashboard/plugin');

module.exports = {
    plugins: [
    new DashboardPlugin(),
    ],
};

o utilizzando compiler.apply() se utilizzi un server di sviluppo basato su Express:

compiler.apply(new DashboardPlugin());

Non esitare a utilizzare la dashboard per trovare i probabili punti di miglioramento. Ad esempio: scorri la sezione Moduli per scoprire quali librerie sono troppo grandi e potrebbero essere sostituite con più piccole alternative.

dimensione bundle

bundlesize verifica che gli asset webpack non superino le dimensioni specificate. Integrala con una CI per ricevere una notifica quando l'app diventa troppo grande:

Per configurarlo:

Scopri le dimensioni massime

1. Ottimizza l'app in modo che sia il più piccola possibile. Esegui la build di produzione.

2. Aggiungi la sezione bundlesize a package.json con i seguenti contenuti:

   // package.json
   {
     "bundlesize": [
       {
         "path": "./dist/*"
       }
     ]
   }
   

3. Esegui bundlesize con npx:

   npx bundlesize
   

   Verrà stampata la dimensione compressa con gzip di ogni file:

   PASS  ./dist/icon256.6168aaac8461862eab7a.png: 10.89KB
   PASS  ./dist/icon512.c3e073a4100bd0c28a86.png: 13.1KB
   PASS  ./dist/main.0c8b617dfc40c2827ae3.js: 16.28KB
   PASS  ./dist/vendor.ff9f7ea865884e6a84c8.js: 31.49KB
   

4. Aggiungi il 10-20% a ogni dimensione e otterrai il numero massimo di dimensioni. Questo margine del 10-20% consente sviluppare l'app come al solito, avvisandoti quando le sue dimensioni aumentano eccessivamente.

   Attiva bundlesize

5. Installa il pacchetto bundlesize come dipendenza di sviluppo:

   npm install bundlesize --save-dev
   

6. Nella sezione bundlesize in package.json, specifica le dimensioni massime concrete. Per alcuni file (ad es. le immagini), ti consigliamo di specificare le dimensioni massime per tipo di file, non per ciascun file:

   // package.json
   {
     "bundlesize": [
       {
         "path": "./dist/*.png",
         "maxSize": "16 kB",
       },
       {
         "path": "./dist/main.*.js",
         "maxSize": "20 kB",
       },
       {
         "path": "./dist/vendor.*.js",
         "maxSize": "35 kB",
       }
     ]
   }   
   

7. Aggiungi uno script npm per eseguire il controllo:

   // package.json
   {
     "scripts": {
       "check-size": "bundlesize"
     }
   }
   

8. Configura la CI in modo che esegua npm run check-size a ogni push. (E integra bundlesize con GitHub se stai sviluppando il progetto su GitHub).

È tutto! Ora, se esegui npm run check-size o invii il codice, vedrai se i file di output sono abbastanza piccoli:

Oppure, in caso di errori:

Per approfondire

• Alex Russell sul tempo di caricamento reale che dovremmo scegliere come target

Analizza il motivo per cui il pacchetto è così grande

Ti consigliamo di esaminare più da vicino il bundle per vedere quali moduli occupano spazio. Utilizza webpack-bundle-analyzer:

(registrazione dello schermo da github.com/webpack-contrib/webpack-bundle-analyzer)

webpack-bundle-analyzer analizza il bundle e crea una visualizzazione del contenuto al suo interno. Utilizza questa visualizzazione per trovare dipendenze di grandi dimensioni o non necessarie.

Per utilizzare lo strumento di analisi, installa il pacchetto webpack-bundle-analyzer:

npm install webpack-bundle-analyzer --save-dev

aggiungi un plug-in alla configurazione webpack:

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

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

ed esegui la build di produzione. Il plug-in aprirà la pagina delle statistiche in un browser.

Per impostazione predefinita, la pagina delle statistiche mostra le dimensioni dei file analizzati (ovvero, dei file così come appaiono nei file) del bundle). Probabilmente ti consigliamo di confrontare le dimensioni gzip, poiché sono più vicine a quelle sperimentate dagli utenti reali. Utilizza la barra laterale a sinistra per cambiare le dimensioni.

Nota: se utilizzi ModuleConcatenationPlugin, potrebbe essere unita una parte dei moduli nell'output di webpack-bundle-analyzer, rendendo il report meno dettagliato. Se utilizzi questo plug-in, disattivalo durante l'analisi.

Ecco cosa cercare nel report:

• Dipendenze di grandi dimensioni. Perché sono così grandi? Sono disponibili alternative più piccole (ad es. Preact instead of React)? Utilizzi tutto il codice incluso (ad es. Moment.js include molte lingue che spesso non vengono utilizzati e potrebbero essere scartati)?
• Dipendenze duplicate. La stessa libreria si ripete in più file? (ad es. l'opzione optimization.splitChunks.chunks, nel webpack 4, oppure CommonsChunkPlugin, in webpack 3, per spostarla in un file comune). In alternativa, il pacchetto contiene più versioni della stessa libreria?
• Dipendenze simili. Esistono librerie simili che svolgono più o meno lo stesso lavoro? (ad es. moment e date-fns o lodash e lodash-es.) Prova a continuare con un singolo strumento.

Leggi anche l'efficace analisi di Sean Larkin del webpack bundle.

Riepilogo

• Utilizza webpack-dashboard e bundlesize per tenere traccia delle dimensioni della tua app
• Analizza gli aspetti che possono aumentare le dimensioni con webpack-bundle-analyzer