Monitorare e analizzare l'app

Quali strumenti utilizzare per monitorare e analizzare il bundle webpack

Anche quando configuri webpack in modo da ridurre le dimensioni dell'app, è comunque importante tenerne traccia e sapere cosa include. In caso contrario, puoi installare una dipendenza che renderà l'app due volte più grande e non la noterà.

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

Tieni traccia delle dimensioni del set

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

dashboard-webpack

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

Questa dashboard consente di monitorare le dipendenze di grandi dimensioni. Se ne aggiungi una, la vedrai immediatamente nella sezione Moduli.

Per abilitarlo, installa il pacchetto webpack-dashboard:

npm install webpack-dashboard --save-dev

Aggiungi il plug-in alla sezione plugins del file di configurazione:

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

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

o compiler.apply() se usi 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 alternative più piccole.

dimensione gruppo

bundlesize permette di verificare che gli asset del 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 da ridurla il più possibile. Eseguire la build di produzione.

2. Aggiungi la sezione bundlesize in 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 ciascun 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 taglia per ottenere le dimensioni massime. Questo margine del 10-20% ti consente di sviluppare l'app come al solito, avvisandoti quando le sue dimensioni aumentano troppo.

   Attiva bundlesize

5. Installa il pacchetto bundlesize come dipendenza per lo sviluppo:

   npm install bundlesize --save-dev
   

6. Nella sezione bundlesize in package.json, specifica le dimensioni massime concrete. Per alcuni file (ad esempio, immagini), potresti voler specificare la dimensione massima per tipo di file, non per ogni 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. Inoltre, integra bundlesize con GitHub se stai sviluppando il progetto su di esso.

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

Oppure, in caso di errori:

Per approfondire

• Alex Russell in merito al tempo di caricamento reale che dovremmo scegliere come target

Analizza il motivo per cui il bundle è così grande

Potresti voler approfondire il bundle per vedere quali moduli occupano spazio al suo interno. Scopri webpack-bundle-analyzer:

webpack-bundle-analyzer esegue la scansione del bundle e crea una visualizzazione del contenuto del bundle. 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 del webpack:

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

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

ed eseguire 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 i file così come vengono visualizzati nel bundle). Ti consigliamo di confrontare le dimensioni di gzip, poiché sono più simili all'esperienza degli utenti reali; utilizza la barra laterale a sinistra per cambiare le dimensioni.

Ecco cosa cercare nel report:

• Dipendenze grandi. Perché sono così grandi? Esistono alternative più piccole (ad es. l'azione anziché la reazione)? Utilizzi tutto il codice che include (ad es. Moment.js include molte impostazioni internazionali spesso non utilizzate e potrebbero essere eliminate)?
• Dipendenze duplicate. Vedi la stessa raccolta che si ripete in più file? Usa, ad esempio, l'opzione optimization.splitChunks.chunks (nel webpack 4) o CommonsChunkPlugin nel webpack 3 per spostarla in un file comune. Oppure il bundle ha più versioni della stessa libreria?
• Dipendenze simili. Esistono librerie simili che svolgono all'incirca lo stesso lavoro? (ad es. moment e date-fns o lodash e lodash-es). Prova a continuare con un solo strumento.

Scopri anche l'ampia analisi dei pacchetti webpack di Sean Larkin.

Riepilogo

• Utilizza webpack-dashboard e bundlesize per rimanere aggiornato sulle dimensioni della tua app
• Scopri cosa aumenta le dimensioni con webpack-bundle-analyzer