Analizzatore statistiche webpack
Scopri quali package e moduli occupano più spazio nel tuo build webpack.
Analizzatore statistiche webpack
Genera un stats.json da webpack (`webpack --json > stats.json`, oppure con `stats: { modules: true }` nella tua config) e incollalo qui per vedere esattamente quali package e moduli stanno gonfiando il tuo build. Questo è il modo più veloce per rispondere a "perché il mio build è così grande" senza installare un plugin bundle-analyzer o ricompilare con flag speciali — il report legge il JSON che hai già.
Raggruppare il report per package node_modules per vedere il costo totale di una dipendenza, per cartella per vedere quale parte del tuo codice sorgente è più pesante, o lascialo non raggruppato per ispezionare i moduli individuali uno per uno. L'opzione "righe da visualizzare" limita un report lungo ai maggiori offensori; la percentuale del totale mette la dimensione di ogni riga in contesto; e se il tuo stats.json contiene un campo di dimensione compressa per modulo (gzipSize o sizeGzip), attivando la colonna vengono mostrati entrambi i numeri fianco a fianco. Il filtraggio per entry point o nome di chunk limita tutto a un solo bundle, che è utile quando un'app ha più di un file di output.
Lo strumento contrassegna anche package che compaiono in più percorsi di installazione node_modules — un segno comune che due dipendenze richiedono versioni incompatibili della stessa libreria e webpack finisce per spedire entrambe le copie. Queste righe sono contrassegnate nell'output per essere facili da individuare anche in un report lungo. Scegli formato tabella per un report leggibile o CSV per incollare in un foglio di calcolo quando stai tracciando la dimensione del bundle nel tempo.
Tutto viene eseguito nel tuo browser: il stats.json viene analizzato localmente e non viene mai caricato da nessuna parte, quindi è sicuro da usare con una base di codice proprietaria. Copia il risultato, scaricalo come file .txt, o invialo direttamente all'input di un altro strumento per continuare.