rollup-plugin-webpack-stats

Generate rollup stats JSON file with a bundle-stats webpack supported structure.

Install

1npm install --dev rollup-plugin-webpack-stats

or

1yarn add --dev rollup-plugin-webpack-stats

or

1pnpm add -D rollup-plugin-webpack-stats

Configure

1// rollup.config.js
2import webpackStatsPlugin from 'rollup-plugin-webpack-stats';
3
4export default {
5  plugins: [
6    // add it as the last plugin
7    webpackStatsPlugin(),
8  ],
9};

1// vite.config.js
2import { defineConfig } from 'vite';
3import webpackStatsPlugin from 'rollup-plugin-webpack-stats';
4
5export default defineConfig((env) => ({
6  plugins: [
7    // Output webpack-stats.json file
8    webpackStatsPlugin(),
9  ],
10}));

Options

• fileName - the JSON filepath relative to the build folder or absolute(default: webpack-stats.json)
• transform - access and mutate the resulting stats after the conversion: (stats: WebpackStatsFilterd, sources: TransformSources, bundle: OutputBundle) => WebpackStatsFilterd
• moduleOriginalSize - extract module original size or rendered size (default: false)
• write - format and write the stats to disk(default: fs.write(filename, JSON.stringify(stats, null, 2)))
• rollup stats options (rollup-plugin-stats)
  • excludeAssets - exclude matching assets: string | RegExp | ((filepath: string) => boolean) | Array<string | RegExp | ((filepath: string) => boolean)>
  • excludeModules - exclude matching modules: string | RegExp | ((filepath: string) => boolean) | Array<string | RegExp | ((filepath: string) => boolean)>

Examples

Output to a custom filename

1// rollup.config.js
2import webpackStatsPlugin from 'rollup-plugin-webpack-stats';
3
4module.exports = {
5  plugins: [
6    // add it as the last plugin
7    webpackStatsPlugin({
8      filename: 'artifacts/stats.json',
9    }),
10  ],
11};

Exclude .map files

1// rollup.config.js
2import webpackStatsPlugin from 'rollup-plugin-webpack-stats';
3
4export default {
5  plugins: [
6    // add it as the last plugin
7    webpackStatsPlugin({
8      excludeAssets: /\.map$/,
9    }),
10  ],
11};

Vite.js - multiple stats files when using plugin-legacy

1// for the the modern and legacy outputs
2import { defineConfig } from 'vite';
3import legacy from '@vitejs/plugin-legacy';
4import webpackStatsPlugin from 'rollup-plugin-webpack-stats';
5
6export default defineConfig((env) => ({
7  build: {
8    rollupOptions: {
9      output: {
10        plugins: [
11          // Output webpack-stats-modern.json file for the modern build
12          // Output webpack-stats-legacy.json file for the legacy build
13          // Stats are an output plugin, as plugin-legacy works by injecting
14          // an additional output, that duplicates the plugins configured here
15          webpackStatsPlugin((options) => {
16            const isLegacy = options.format === 'system';
17            return {
18              fileName: `webpack-stats${isLegacy ? '-legacy' : '-modern'}.json`,
19            };
20          }),
21        ],
22      },
23    },
24  },
25  plugins: [
26    legacy({
27      /* Your legacy config here */
28    }),
29  ],
30}));

Vite.js - update initial flag for chunks where the inital flag is incorrectly set to false

1import { defineConfig } from 'vite';
2import webpackStatsPlugin from 'rollup-plugin-webpack-stats';
3
4export default defineConfig((env) => ({
5  build: {
6    rollupOptions: {
7      output: {
8        plugins: [
9          webpackStatsPlugin({
10            transform: (stats) => {
11              // Find the target chunk entry
12              const mainChunkIndex = stats.chunks?.findIndex((chunk) => chunk.names?.includes("main"));
13
14              // When the tartget chunk is found, set the initial flag to true
15              if (typeof mainChunkIndex !== 'undefined' && stats?.chunks?.[mainChunkIndex]) {
16                stats.chunks[mainChunkIndex] = {
17                  ...stats.chunks[mainChunkIndex],
18                  initial: true,
19                };
20              }
21
22              // return the modified stats object
23              return stats;
24            },
25          }),
26        ],
27      },
28    },
29  },
30}));

Resources

• Vite - Using plugins
• Rollup - Using plugins
• RelativeCI - Vite configuration for better bundle monitoring

@relative-ci/agent examples

• example-vite-github-action
• example-vite-cli-github-action