# rollup-plugin-bundle-stats
Demos:
Bundle analysis comparison ยท
Bundle analysis
BundleStats Rollup/Vite/Rolldown plugin
Analyze Rollup/Vite/Rolldown bundle 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](#install)
- [Configure](#configure)
- [Compare mode](#compare-mode)
- [Other packages](#other-packages)
- [Related projects](#related-projects)
## Install
```shell
npm install --dev rollup-plugin-bundle-stats
```
or
```shell
yarn add --dev rollup-plugin-bundle-stats
```
## Configure
### Vite
```js
// vite.config.js
const { bundleStats } = require('rollup-plugin-bundle-stats');
module.exports = {
...,
build: {
rollupOptions: {
output: {
assetFileNames: 'assets/[name].[hash][extname]',
chunkFileNames: 'assets/[name].[hash].js',
entryFileNames: 'assets/[name].[hash].js',
},
},
},
plugins: [
bundleStats()
]
};
```
### Rollup
```js
// rollup.config.js
const { bundleStats } = require('rollup-plugin-bundle-stats');
module.exports = {
...,
output: {
assetFileNames: 'assets/[name].[hash][extname]',
chunkFileNames: 'assets/[name].[hash].js',
entryFileNames: 'assets/[name].[hash].js',
},
plugins: [
bundleStats()
]
};
```
### Rolldown
```js
// rolldown.config.js
import { defineConfig } from 'rolldown';
import { bundleStats } from 'rollup-plugin-bundle-stats';
export default defineConfig({
...,
output: {
assetFileNames: 'assets/[name].[hash][extname]',
chunkFileNames: 'assets/[name].[hash].js',
entryFileNames: 'assets/[name].[hash].js',
},
plugins: [
bundleStats()
]
});
```
[How to configure Vite for better debugging and monitoring](https://relative-ci.com/documentation/guides/vite-config)
### Options
- `compare` - use local saved stats for comparison (default `true`).
- `baseline` - save current webpack stats as baseline (default `false`).
- `baselineFilepath` - baseline absolute filepath or relative filepath to `output.dir` (default 'node_modules/.cache/bundle-stats/baseline.json')
- `html` - output html report (default `true`).
- `json` - output json report (default `false`).
- `outDir` - output directory inside rollup output director `output.dir` (default `''`).
- `silent` - stop logging info and only log warning and error (default `false`).
## Compare mode
In `compare` mode, the metrics are compared against an existing(`node_modules/.cache/bundle-stats/baseline.json`) rollup stats file(baseline). To generate the baseline webpack stats, set `BUNDLE_STATS_BASELINE` environmental variable to `true` or set the plugin `baseline` option to `true`:
```shell
# 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 the plugin `compare` option to `false`.
## Other packages
### [`bundle-stats`](https://github.com/relative-ci/bundle-stats/tree/master/packages/cli)
[](https://www.npmjs.com/package/bundle-stats) [](https://www.npmjs.com/package/bundle-stats)
CLI to generate bundle stats report.
### [`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 for webpack/rspack.
### [`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).
## Related projects
### :cyclone: [relative-ci.com](https://relative-ci.com?utm_medium=rollup-plugin-bundle-stats)
#### Automated bundle analysis, reviews and monitoring - Quickly identify and fix bundle regressions before shipping to production.
- :crystal_ball: In-depth bundle stats analysis for every build
- :chart_with_upwards_trend: Monitor bundle stats changes and identify opportunities for optimizations
- :bell: Quick feedback with [rule based automated review flow](https://relative-ci.com/documentation/setup/configure/integrations/github-commit-status-review?utm_medium=rollup-plugin-bundle-stats), [GitHub Pull Request comments](https://relative-ci.com/documentation/setup/configure/integrations/github-pull-request-comment?utm_medium=rollup-plugin-bundle-stats), [GitHub check reports](https://relative-ci.com/documentation/setup/configure/integrations/github-check-report?utm_medium=rollup-plugin-bundle-stats), or [Slack messages](https://relative-ci.com/documentation/setup/configure/integrations/slack-notification?utm_medium=rollup-plugin-bundle-stats)
- :wrench: Support for **webpack**, **vite**, **rspack**, **rollup**, **rolldown**
- :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**](https://relative-ci.com/open-source?utm_medium=rollup-plugin-bundle-stats)
[:rocket: Get started](https://relative-ci.com?utm_medium=rollup-plugin-bundle-stats)
### :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.