Quali strumenti usare per tenere traccia e analizzare il bundle webpack
Anche quando configuri Webpack per ridurre le dimensioni dell'app, è comunque importante tenere tracciarli e capire 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 set.
Tieni traccia delle dimensioni dei set
Per monitorare le dimensioni dell'app, usa webpack-dashboard durante lo sviluppo e bundlesize su CI.
webpack-dashboard
webpack-dashboard migliora l'output webpack con dimensioni delle dipendenze, avanzamento e altri dettagli. Ecco che aspetto ha:
Questa dashboard aiuta a tenere traccia delle dipendenze di grandi dimensioni (se ne aggiungi una, la vedrai immediatamente in nella sezione Moduli.
Per abilitarla, 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());
Prova a utilizzare la dashboard per trovare potenziali 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
Ottimizza l'app in modo da ridurla il più possibile. Esegui la build di produzione.
Aggiungi la sezione
bundlesize
apackage.json
con quanto segue contenuti:// package.json { "bundlesize": [ { "path": "./dist/*" } ] }
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
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
Installa il pacchetto
bundlesize
come dipendenza di sviluppo:npm install bundlesize --save-dev
Nella sezione
bundlesize
delpackage.json
, specifica il contesto dimensioni massime consentite. Per alcuni file (ad es. le immagini), ti consigliamo di specificare la dimensione massima di ogni 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", } ] }
Aggiungi uno script npm per eseguire il controllo:
// package.json { "scripts": { "check-size": "bundlesize" } }
Configura la CI in modo che esegua
npm run check-size
a ogni push. Inoltre, integrabundlesize
con GitHub se stai sviluppando il progetto su questo servizio.
È tutto! Ora, se esegui npm run check-size
o esegui il push del codice, vedrai se i file di output sono
abbastanza piccolo:
Oppure, in caso di errori:
Per approfondire
- Alex Russell sul tempo di caricamento reale che dovremmo target
Analizza perché il bundle è così grande
Potresti voler analizzare più in dettaglio il bundle per vedere quali moduli occupano spazio. Scopri webpack-bundle-analyzer:
webpack-bundle-analyzer analizza il bundle e crea una visualizzazione del contenuto al suo interno. Usa questa per trovare dipendenze grandi 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 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, dei file così come appaiono nei file) del bundle). Ti consigliamo di confrontare le dimensioni di gzip poiché sono più vicine a quelle degli utenti reali. esperienza; usa la barra laterale a sinistra per cambiare le dimensioni.
Ecco cosa cercare nel report:
- Dipendenze grandi. Perché sono così grandi? Sono disponibili alternative più piccole (ad es. Preazione invece di React)? Utilizzi tutto il codice che include (ad es. Moment.js include molte lingue che spesso non vengono utilizzati e potrebbero essere scartati)?
- Dipendenze duplicate. Vedi la stessa raccolta che si ripete in più file? (ad es.
l'opzione
optimization.splitChunks.chunks
, nel webpack 4, oppureCommonsChunkPlugin
, in webpack 3, per spostarla in un file comune). Oppure il bundle ha più versioni della stessa libreria? - Dipendenze simili. Esistono librerie simili che svolgono più o meno lo stesso lavoro? (ad es.
moment
edate-fns
olodash
elodash-es
.) Prova a continuare con un singolo strumento.
Leggi anche l'efficace analisi di Sean Larkin del webpack bundle.
Riepilogo
- Utilizza
webpack-dashboard
ebundlesize
per monitorare le dimensioni della tua app - Analizza gli aspetti che possono aumentare le dimensioni con
webpack-bundle-analyzer