Demos: Bundle analysis comparison · Bundle analysis

BundleStats

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

- Bundle size and totals by file type(css, js, img, etc)
- Insights: duplicate packages, new packages
- Initial JS/CSS, Cache invalidation, and other bundle metrics
- Assets report (entrypoint, initial, types, changed, delta)
- Modules report (changed, delta, chunks, duplicate count and percentage)
- 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

Output webpack stats

The CLI is consuming the Webpack stats JSON file. The following webpack stats options are needed:

{
  stats: {
    // required
    assets: true,
    chunks: true,
    modules: true,
    // optional
    builtAt: true,
    hash: true
  }
}

How to configure webpack for better debugging and monitoring

You can output the webpack stats JSON file using webpack-cli --json option:

npx webpack --mode production --json artifacts/webpack-stats.json

Usage

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

Options:
      --demo               Generate demo reports      [boolean] [default: false]
      --compare            Use local saved stats for comparison
                                                       [boolean] [default: true]
      --baseline           Save current stats as baseline
                                                      [boolean] [default: false]
      --baseline-filepath  Baseline filepath, default:
                           node_modules/.cache/bundle-stats/baseline.json
                                                                        [string]
      --html               Save HTML report            [boolean] [default: true]
      --json               Save JSON data             [boolean] [default: false]
  -d, --out-dir            Output directory                             [string]
  -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

Related projects

🌀 relative-ci.com

Optimize your web app's performance with automated bundle stats analysis and monitoring.

🔮 In-depth bundle stats analysis for every build
📈 Monitor bundle stats changes and identify opportunities for optimizations
🔔 Rule based automated review flow, or get notified via GitHub Pull Request comments, GitHub check reports and Slack messages
🔧 Support for webpack and beta support for Vite/Rollup
🔨 Support for all major CI services(CircleCI, GitHub Actions, Gitlab CI, Jenkins, Travis CI)
🔩 Support for npm, yarn and pnpm; support for monorepos
💕 Always free for Open Source