bundle-stats

BundleStats

Generate bundle report(bundle size, assets, modules, packages) and compare the results between different builds.

- Bundle size and totals by file type(css, js, img, etc)
- Cache invalidation, Initial JS/CSS and other bundle specific metrics
- Assets report (entrypoint, initial, types, changed, delta)
- Modules report (changed, delta) by chunk
- Packages report (count, duplicate, changed, delta)
:star: Side by side comparison for multiple jobs

Table of Contents

• Install as global dependency
• Install as dev dependency
• Webpack configuration
• Usage
• Compare mode
• Framework specific plugins
• Related projects

Install as global dependency

npm install -g bundle-stats

or

yarn global add bundle-stats

Install as dev dependency

npm install --dev bundle-stats

or

yarn add --dev bundle-stats

Webpack configuration

The CLI is consuming the Webpack stats json. The following stats options are required:

{
  stats: {
    assets: true,
    entrypoints: true,
    chunks: true,
    modules: true,
    builtAt: true,
    hash: true
  }
}

Read more about Webpack stats configuration

Usage

$ bundle-stats -h
Usage: bundle-stats OPTIONS [WEBPACK_STATS_FILE]...

Options:
  --compare      Use local saved stats for comparison  [boolean] [default: true]
  --baseline     Save current stats as baseline       [boolean] [default: false]

  --html         Save HTML report                      [boolean] [default: true]
  --json         Save JSON data                       [boolean] [default: false]

  --demo         Generate demo reports                          [default: false]

  -d, --out-dir  Output directory                            [default: "./dist"]
  -h, --help     Show help                                             [boolean]
  -v, --version  Show version number                                   [boolean]

$ bundle-stats --html --json __fixtures__/webpack-stats-0.json __fixtures__/webpack-stats-1.json
  ✔ Read Webpack stat files
  ✔ Read baseline data
  ↓ Write baseline data [skipped]
    → Not a baseline job (see --baseline).
  ✔ Gather data
  ✔ Generate reports
  ✔ Save reports

Reports saved:
- ./dist/bundle-stats.html
- ./dist/bundle-stats.json

Compare mode

In compare mode, the metrics are compared against an existing(node_modules/.cache/bundle-stats/baseline.json) Webpack stats file(baseline). To generate the baseline webpack stats, use --baseline option:

# Checkout to the branch/tag/commit where you want to generate the baseline
$ git checkout master

# Build your application
$ npm run build

# Run bundle-stats with --baseline option. This will save the baseline data on node_modules/.cache/bundle-stats/baseline.json
$ bundle-stats --baseline artifacts/webpack-stats.json
 ✔ Read Webpack stat files
 ↓ Read baseline data [skipped]
   → Missing baseline stats, see "--baseline" option.
 ✔ Write baseline data
 ✔ Process data
 ✔ Generate reports
 ✔ Save reports

Reports saved:
- ./dist/bundle-stats.html

# Checkout to the working branch/tag/commit
$ git checkout MY_FEATURE_BRANCH

# Build your application
$ npm run build

# Run bundle-stats - the report is going to compare the current data against the generated baseline
$ bundle-stats artifacts/webpack-stats.json
 ✔ Read Webpack stat files
 ✔ Read baseline data
 ↓ Write baseline data [skipped]
   → Not a baseline job (see --baseline).
 ✔ Process data
 ✔ Generate reports
 ✔ Save reports

Reports saved:
- ./dist/bundle-stats.html

The option can be disabled using --no-compare option.

Framework specific plugins

• Webpack
• Gatsby
• Next

Related projects

relative-ci/compare

Standalone web application to compare Webpack/Lighthouse/Browsertime stats.

relative-ci.com

Continuous monitoring for web bundle stats:

• monitor bundle size, assets, modules, packages
• Github Checks integration
• support for all major CI services (Travis CI, Circle CI, Jenkins, Gitlab CI, Codeship, etc)
• free for OpenSource