JSPM

bundle-stats

1.11.0-beta.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 20085
  • Score
    100M100P100Q140519F
  • License MIT

In-depth bundle analyzer for webpack(bundle size, assets, modules)

Package Exports

  • bundle-stats

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 screenshot

BundleStats

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

Node version TravisCI badge Renovate RelativeCI badge Language grade: JavaScript

- 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, changed, delta)
⭐ Side by side comparison for multiple jobs

Table of Contents

1. Webpack plugin

Install

npm install --dev bundle-stats

or

yarn add --dev bundle-stats

Webpack configuration

// webpack.config.js
const { BundleStatsWebpackPlugin } = require('bundle-stats');

module.exports = {
  ...,
  plugins: [
    new BundleStatsWebpackPlugin()
  ]
}

BundleStatsWebpackPlugin(options)

  • compare - use local saved stats for comparison (default true).
  • baseline - save current webpack stats as baseline (default false).
  • html - output html report (default true).
  • json - output json report (default false).
  • outDir - output directory relative to output.path (default '').
  • stats - Webpack stats options default:
    {
  stats: {
    context: WEBPACK_CONTEXT,
    assets: true,
    entrypoints: true,
    chunks: true,
    modules: true,
  }
}

Compare mode

In compare mode, the metrics are compared against an existing Webpack stats file(baseline). To generate the baseline webpack stats, set BUNDLE_STATS_BASELINE environmental variable to true or set BundleStatsWebpackPlugin baseline option to true:

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

# Build your application with BUNDLE_STATS_BASELINE environmental variable
$ BUNDLE_STATS_BASELINE=true npm run build

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

# Build your application
$ npm run build

The option can be disabled by setting BundleStatsWebpackPlugin compare option to false.

2. CLI

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

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

3. Gatsby plugin

Install bundle-stats as a Gatsby plugin.

Read more

4. Next.js plugin

Install bundle-stats as a Next.js plugin.

Read more

5. Standalone web application

Use https://compare.relative-ci.com to compare Webpack/Lighthouse/Browsertime stats.

Read more

6. ⚡ Running on CI

Continuous monitoring with BundleStats on CI:

  • Github Checks integration
  • support for all major CI services (Travis CI, Circle CI, Jenkins, Gitlab CI, Codeship, etc)
  • free for OpenSource

Read more about running BundleStats on CI (BETA)