Skip to content
In-depth reports for webpack bundles
JavaScript CSS HTML
Branch: master
Clone or download

README.md

BundleStats screenshot

BundleStats

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

Node version TravisCI badge Renovate RelativeCI badge

- 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
⭐️ 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)

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

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:
  --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
  ✔ Gather data
  ✔ Generate reports
  ✔ Save reports

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

3. Standalone web application

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

Read more

4. ⚡️ 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)

5. Packages

bundle-stats

Generate bundle report based on Webpack stats data.

@bundle-stats/web-compare

Side by side comparison for webpack/lighthouse/browsertime stats - https://compare.relative-ci.com.

@bundle-stats/html-templates

HTML templates for report generation.

@bundle-stats/ui

UI components for BundleStats projects.

@bundle-stats/utils

Utilities for BundleStats projects.

You can’t perform that action at this time.