rollup-plugin-webpack-stats

rollup-plugin-webpack-stats

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

Install

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

or

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

or

pnpm add -D rollup-plugin-webpack-stats

Configure

// rollup.config.js
import webpackStatsPlugin from 'rollup-plugin-webpack-stats';

export default {
  plugins: [
    // add it as the last plugin
    webpackStatsPlugin(),
  ],
};

// vite.config.js
import { defineConfig } from 'vite';
import webpackStatsPlugin from 'rollup-plugin-webpack-stats';

export default defineConfig((env) => ({
  plugins: [
    // Output webpack-stats.json file
    webpackStatsPlugin(),
  ],
}));

Options

• fileName - JSON stats file inside rollup/vite output directory
• 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

// rollup.config.js
import webpackStatsPlugin from 'rollup-plugin-webpack-stats';

module.exports = {
  plugins: [
    // add it as the last plugin
    webpackStatsPlugin({
      filename: 'artifacts/stats.json',
    }),
  ],
};

Exclude .map files

// rollup.config.js
import webpackStatsPlugin from 'rollup-plugin-webpack-stats';

export default {
  plugins: [
    // add it as the last plugin
    webpackStatsPlugin({
      excludeAssets: /\.map$/,
    }),
  ],
};

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

// for the the modern and legacy outputs
import { defineConfig } from 'vite';
import legacy from '@vitejs/plugin-legacy';
import webpackStatsPlugin from 'rollup-plugin-webpack-stats';

export default defineConfig((env) => ({
  build: {
    rollupOptions: {
      output: {
        plugins: [
          // Output webpack-stats-modern.json file for the modern build
          // Output webpack-stats-legacy.json file for the legacy build
          // Stats are an output plugin, as plugin-legacy works by injecting
          // an additional output, that duplicates the plugins configured here
          webpackStatsPlugin((options) => {
            const isLegacy = options.format === 'system';
            return {
              fileName: `webpack-stats${isLegacy ? '-legacy' : '-modern'}.json`,
            };
          }),
        ],
      },
    },
  },
  plugins: [
    legacy({
      /* Your legacy config here */
    }),
  ],
}));

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