Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

relative-ci/rollup-plugin-webpack-stats

Open more actions menu

Repository files navigation

rollup-plugin-webpack-stats

ci Socket Badge

Vite compatibility Rolldown compatibility Rollup compatibility

Rollup/Vite/Rolldown plugin to generate a stats JSON file with a bundle-stats webpack-compatible structure.

Note

This plugin generates a webpack-compatible stats JSON file for programmatic usage, inspection, or integration with other compatible tools. To analyze your Rollup/Vite/Rolldown bundle, use rollup-plugin-bundle-stats instead.

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 - 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

// 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 */
    }),
  ],
}));

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

import { defineConfig } from 'vite';
import webpackStatsPlugin from 'rollup-plugin-webpack-stats';

export default defineConfig((env) => ({
  build: {
    rollupOptions: {
      output: {
        plugins: [
          webpackStatsPlugin({
            transform: (stats) => {
              // Find the target chunk entry
              const mainChunkIndex = stats.chunks?.findIndex((chunk) =>
                chunk.names?.includes('main')
              );

              // When the tartget chunk is found, set the initial flag to true
              if (
                typeof mainChunkIndex !== 'undefined' &&
                stats?.chunks?.[mainChunkIndex]
              ) {
                stats.chunks[mainChunkIndex] = {
                  ...stats.chunks[mainChunkIndex],
                  initial: true,
                };
              }

              // return the modified stats object
              return stats;
            },
          }),
        ],
      },
    },
  },
}));

Resources

Related projects

Analyze bundle stats(bundle size, assets, modules, packages) and compare the results between different builds. Support for webpack, rspack, vite, rolldown and rollup.

Output vite/rollup/rolldown stats.

Automated bundle analysis, reviews and monitoring - Quickly identify and fix bundle regressions before shipping to production.

🚀 Get started

Development

Use the project node version

nvm use

Install dependencies

npm install

Prepare

npm run prepare

About

Rollup/Vite/Rolldown plugin to generate a stats JSON file with a bundle-stats webpack-compatible structure

Topics

Resources

Stars

Watchers

Forks

Releases

Used by

Contributors

Languages

Morty Proxy This is a proxified and sanitized view of the page, visit original site.