rollup-plugin-visualizer

The include and exclude options accept a Filter type: { bundle?: picomatchPattern, file?: picomatchPattern }.

Filters use picomatch globs and support the format BUNDLE_GLOB:FILE_GLOB (the colon is required when matching the bundle).

Supported forms:

• Bundle + file: translation-*.js:*/**/index.js
• Bundle only: translation-*.js:
• File only (default): */**/index.js

If include is omitted or empty, all files are included by default. Otherwise, an ID must match at least one include pattern and must not match any exclude pattern.

The visualizer provides several ways to inspect your bundle:

• Sunburst: A circular view. Clicking an arc zooms into that section.
• Flamegraph: A top-down hierarchical view.
• Treemap: A rectangular hierarchical view for finding large modules quickly.
• Network: A force-directed graph to see module relationships. Gray circles represent tree-shaken files. To reduce noise, try removing highly connected nodes like commonjsHelpers, tslib, or react.
• Raw-data: JSON output (usually used with the CLI).
• List: A YAML file useful for tracking bundle changes over time.
• Markdown: A report with summary tables and configuration notes.

Install the plugin as a development dependency using npm or yarn.

npm install --save-dev rollup-plugin-visualizer

or via yarn:

yarn add --dev rollup-plugin-visualizer

Import visualizer and cast it to RolldownPlugin within your defineConfig call.

import { defineConfig, type RolldownPlugin } from "rolldown";
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  plugins: [visualizer() as RolldownPlugin],
});

Add visualizer() to the plugins array in your vite.config.js or vite.config.ts.

import { defineConfig, type PluginOption } from "vite";
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  plugins: [visualizer() as PluginOption],
});

Import visualizer from rollup-plugin-visualizer and add it to your plugins array. It is recommended to keep the visualizer as the last plugin in your configuration.

import { visualizer } from "rollup-plugin-visualizer";

export default {
  plugins: [
    // Keep it last.
    visualizer(),
  ],
};

In SvelteKit, it is often necessary to set emitFile: true because SvelteKit may run Vite multiple times. When emitFile is true, the filename must be a file name rather than a path.

import { visualizer } from "rollup-plugin-visualizer";

export default {
  plugins: [
    visualizer({
      emitFile: true,
      filename: "stats.html",
    }),
  ],
};

The following flags are available when using the CLI:

The rollup-plugin-visualizer CLI utility allows you to combine multiple JSON reports into a single chart. This is useful when you have multiple build configurations.

rollup-plugin-visualizer [OPTIONS] stat1.json stat2.json ../stat3.json