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)
:star: Side by side comparison for multiple builds
## Table of Contents
- [Install as global dependency](#install-as-global-dependency)
- [Install as dev dependency](#install-as-dev-dependency)
- [Webpack configuration](#webpack-configuration)
- [Usage](#usage)
- [Compare mode](#compare-mode-1)
- [Framework specific plugins](#framework-specific-plugins)
- [Related projects](#related-projects)
## Install as global dependency
```shell
npm install -g bundle-stats
```
or
```shell
yarn global add bundle-stats
```
## Install as dev dependency
```shell
npm install --dev bundle-stats
```
or
```shell
yarn add --dev bundle-stats
```
## Output webpack stats
The CLI is consuming the Webpack stats JSON file. The following [webpack stats options](https://webpack.js.org/configuration/stats) are needed:
```js
{
stats: {
// required
assets: true,
chunks: true,
modules: true,
// optional
builtAt: true,
hash: true
}
}
```
[How to configure webpack for better debugging and monitoring](https://relative-ci.com/documentation/guides/webpack-config)
You can output the webpack stats JSON file using [webpack-cli](https://www.npmjs.com/package/webpack-cli) `--json` option:
```shell
npx webpack --mode production --json artifacts/webpack-stats.json
```
- [How to output webpack stats JSON file using webpack-cli](https://relative-ci.com/documentation/guides/webpack-stats/webpack-cli)
- [How to output webpack stats JSON file using webpack-stats-plugin](https://relative-ci.com/documentation/guides/webpack-stats/webpack-stats-plugin)
## Usage
```shell
$ 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]
```
```shell
$ 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:
```shell
# 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
```
```shell
# 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
- [Webpack](https://github.com/relative-ci/bundle-stats/tree/master/packages/webpack-plugin)
- [Gatsby](https://github.com/relative-ci/bundle-stats/tree/master/packages/gatsby-plugin)
- [Next](https://github.com/relative-ci/bundle-stats/tree/master/packages/next-plugin)
## Related projects
### :cyclone: [relative-ci.com](https://relative-ci.com?utm_medium=bundle-stats-cli)
#### 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](https://relative-ci.com/documentation/setup/configure/integrations/github-commit-status-review?utm_medium=bundle-stats-cli), or get notified via [GitHub Pull Request comments](https://relative-ci.com/documentation/setup/configure/integrations/github-pull-request-comment?utm_medium=bundle-stats-cli), [GitHub check reports](https://relative-ci.com/documentation/setup/configure/integrations/github-check-report?utm_medium=bundle-stats-cli) and [Slack messages](https://relative-ci.com/documentation/setup/configure/integrations/slack-notification?utm_medium=bundle-stats-cli)
- :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](https://relative-ci.com?utm_medium=bundle-stats-cli)
### :first_quarter_moon: [relative-ci/compare](https://compare.relative-ci.com)
Standalone web application to compare Webpack/Lighthouse/Browsertime stats.
[Compare bundle stats](https://compare.relative-ci.com)
### :zap: [bundle-stats-action](https://github.com/vio/bundle-stats-action)
Github Action that generates [bundle-stats](https://github.com/relative-ci/bundle-stats) reports.
## Other packages
### [`bundle-stats-webpack-plugin`](https://github.com/relative-ci/bundle-stats/tree/master/packages/webpack-plugin)
[](https://www.npmjs.com/package/bundle-stats-webpack-plugin) [](https://www.npmjs.com/package/bundle-stats-webpack-plugin)
Webpack plugin to generate bundle stats report.
### [`gatsby-plugin-bundle-stats`](https://github.com/relative-ci/bundle-stats/tree/master/packages/gatsby-plugin)
[](https://www.npmjs.com/package/gatsby-plugin-bundle-stats) [](https://www.npmjs.com/package/gatsby-plugin-bundle-stats)
[Gatsby](https://www.gatsbyjs.org) plugin for [bundle-stats](https://github.com/relative-ci/bundle-stats/tree/master/packages/webpack-plugin).
### [`next-plugin-bundle-stats`](https://github.com/relative-ci/bundle-stats/tree/master/packages/next-plugin)
[](https://www.npmjs.com/package/next-plugin-bundle-stats) [](https://www.npmjs.com/package/next-plugin-bundle-stats)
[Next.js](https://nextjs.org) plugin for [bundle-stats](https://github.com/relative-ci/bundle-stats/tree/master/packages/webpack-plugin).
### [`rollup-plugin-bundle-stats`](https://github.com/relative-ci/bundle-stats/tree/master/packages/rollup-plugin)
[](https://www.npmjs.com/package/rollup-plugin-bundle-stats) [](https://www.npmjs.com/package/rollup-plugin-bundle-stats)
Rollup plugin to generate bundle stats report.