Bundle-stats-webpack-plugin NPM

Install

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

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

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

`bundle-stats`

CLI to generate bundle stats report.

`gatsby-plugin-bundle-stats`

Gatsby plugin for bundle-stats.

`next-plugin-bundle-stats`

Next.js plugin for bundle-stats.

`rollup-plugin-bundle-stats`

Rollup plugin to generate bundle stats report.

Related projects

:cyclone: relative-ci.com

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

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

:rocket: Get started

:first_quarter_moon: relative-ci/compare

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

Compare bundle stats

:zap: bundle-stats-action

Github Action that generates bundle-stats reports.

webpack webpack-plugin bundle-size bundle-analyzer bundle-stats stats bundle size assets chunks modules

@bundle-stats/cli-utils @bundle-stats/plugin-webpack-validate core-js lodash

@eviljs/react-webpack dombret @eviljs/webpack-config-react @everything-registry/sub-chunk-1275 @ima/cli-plugin-analyze @moonwalker/jetpack next-plugin-bundle-stats pipenet-tools happier-analyzer happier-scripts @zalastax/nolb-bun @zionbuilder/zionbuilder-service @zionbuilder/cli abc-cli gatsby-plugin-bundle-stats

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

8 months ago

8 months ago

10 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

bundle-stats-webpack-plugin v4.19.0

Table of Contents

Install

Webpack configuration

`BundleStatsWebpackPlugin(options)`

Use with create-react-app

Compare mode

Other packages

`bundle-stats`

`gatsby-plugin-bundle-stats`

`next-plugin-bundle-stats`

`rollup-plugin-bundle-stats`

Related projects

:cyclone: relative-ci.com

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

:first_quarter_moon: relative-ci/compare

:zap: bundle-stats-action