Package Exports

bundle-stats
bundle-stats/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (bundle-stats) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

BundleStats

Analyze webpack stats(bundle size, assets, modules, packages) and compare the results between different builds.

Node version

- 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)
⭐ Side by side comparison for multiple builds

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

yarn global add bundle-stats

Install as dev dependency

npm install --dev bundle-stats

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
  }
}

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

┌─────────────────────────────────────────────────┐
│                                                 │
│   Bundle size decreased with 3.06KB (-0.38%).   │
│                                                 │
└─────────────────────────────────────────────────┘

Artifacts 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

┌─────────────────────────────────────────────────┐
│                                                 │
│   Bundle size decreased with 3.06KB (-0.38%).   │
│                                                 │
└─────────────────────────────────────────────────┘

Artifacts 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

┌─────────────────────────────────────────────────┐
│                                                 │
│   Bundle size decreased with 3.06KB (-0.38%).   │
│                                                 │
└─────────────────────────────────────────────────┘

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

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

Framework specific plugins

🌀 relative-ci.com

Specialized insights for web bundles:

Analyze and monitor webpack stats(bundle size, assets, modules, packages)
GitHub Check, GitHub Pull Request, and Slack integrations
Support for all major CI services (CircleCI, GitHub Actions, Gitlab CI, Jenkins, Travis CI)
Free for OpenSource, developers and small teams

Try for free