chunkalyse

🍰 Summarise webpack entries from stats output file

Analyzes Webpack bundle size

This utility uses Webpack's generated stats file.

webpack --profile --json > stats.json

Is analyses chunks and modules according to the structure output from your Webpack version and configuration.

Supports:

• ✔︎ Webpack stats 📦
• ✔︎ multiple entries 👯
• ✔︎ multiple configurations ⛓
• ✔︎ loaders ⏳
• ✔︎ CLI output formats 🖨
  • human (default, see below)
  • json

CLI

Pipe stats

webpack --config webpack.config.js --profile --json | npx chunkalyse

Pass file route

webpack --config webpack.config.js --profile --json > stats.json
npx chunkalyse stats.json

Install globally for continues use

npm i -g chunkalyse
webpack --config webpack.config.js --profile --json | chunkalyse

Output formats (examples)

View in CLI, descending in size

$ chunkalyse stats.json

main (331.2 kB)
 • self: 243.8 kB (74%)
 • core-js: 38.8 kB (12%)
 • prop-types: 26.5 kB (8%)
 ...

Write JSON to a file

$ chunkalyse stats.json --format json > chunkalised.json

Module delivers object with named entries

const chunkalyse = require('chunkalyse');
const stats = require('./stats.json');
 
chunkalyse(stats); // Named summaries (one for each entry point)
 
{
  main: {
    size: 331215,
    modules: {
      'core-js': {
        size: 38776,
        percent: 12
      },
      self: {
        size: 243771,
        percent: 74
      },
      'style-loader': {
        size: 12465,
        percent: 4
      },
      ...
    }
  }
}

Multiple entries or multiple configurations example

{
  moduleA: { size: 3461, modules: { ... } },
  moduleB: { size: 2533, modules: { ... } },
  moduleC: { size: 3574, modules: { ... } }
}

Thanks

This project uses stats from other projects for research and testing purposes:

• butter-toast
• emoji-picker-react
• react-dates