bundle-stats-webpack-plugin
TypeScript icon, indicating that this package has built-in type declarations

4.13.2 • Public • Published

BundleStats screenshot

Demos: Bundle analysis comparison · Bundle analysis

BundleStats webpack plugin

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

Node version GitHub action CodeQL

RelativeCI

- 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

Table of Contents

Install

npm install --dev bundle-stats-webpack-plugin

or

yarn add --dev bundle-stats-webpack-plugin

Webpack configuration

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

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

BundleStatsWebpackPlugin(options)

  • compare - use local saved baseline 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 webpack output.path (default '').
  • baselineFilepath - baseline filepath relative to webpack output.path (default 'node_modules/.cache/bundle-stats/baseline.json')
  • silent - stop logging info and only log warning and error (default false).
  • stats - Webpack stats options default:
    {
      stats: {
        assets: true,
        chunks: true,
        modules: true,
        builtAt: true,
        hash: true
      }
    }

How to configure webpack for better debugging and monitoring

Use with create-react-app

You will need to customize the default webpack config. That can be done by using react-app-rewired which is one of create-react-app's custom config solutions. You will also need customize-cra.

npm install --dev customize-cra react-app-rewired

or

yarn add customize-cra react-app-rewired --dev

Change your default scripts in package.json to:

/* package.json */
"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

Create a file config-overrides.js at the same level as package.json.

// config-overrides.js
const { override, addWebpackPlugin } = require('customize-cra');
const { BundleStatsWebpackPlugin } = require('bundle-stats-webpack-plugin');

module.exports = override(
  addWebpackPlugin(new BundleStatsWebpackPlugin()),
);

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

Other packages

npm npm

CLI to generate bundle stats report.

npm npm

Gatsby plugin for bundle-stats.

npm npm

Next.js plugin for bundle-stats.

npm npm

Rollup plugin to generate bundle stats report.

Related projects

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

🚀 Get started

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

Compare bundle stats

Github Action that generates bundle-stats reports.

Package Sidebar

Install

npm i bundle-stats-webpack-plugin

Weekly Downloads

36,737

Version

4.13.2

License

MIT

Unpacked Size

19.2 kB

Total Files

7

Last publish

Collaborators

  • vio
  • bundle-stats-bot
  • relativeci-bot