### Install rollup-plugin-visualizer

Source: https://github.com/btd/rollup-plugin-visualizer/blob/master/README.md

Install the plugin using npm or yarn.

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

```sh
yarn add --dev rollup-plugin-visualizer
```

--------------------------------

### Configure Visualizer with Rolldown for Flamegraph Report

Source: https://context7.com/btd/rollup-plugin-visualizer/llms.txt

Use the visualizer plugin within a Rolldown project by casting it to RolldownPlugin for TypeScript compatibility. This example configures a flamegraph report.

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

export default defineConfig({
  input: "src/index.ts",
  output: { dir: "dist" },
  plugins: [
    visualizer({
      template: "flamegraph",
      filename: "dist/flame.html",
    }) as RolldownPlugin,
  ],
});
```

--------------------------------

### Build Rollup Plugin Locally

Source: https://github.com/btd/rollup-plugin-visualizer/blob/master/README.md

Run this command in the project root to build the plugin for local development.

```sh
npm run build
```

--------------------------------

### Configure Visualizer for SvelteKit with EmitFile

Source: https://context7.com/btd/rollup-plugin-visualizer/llms.txt

For SvelteKit, use `emitFile: true` and a plain filename when configuring the visualizer. This allows Rollup to manage file output across multiple Vite builds (client/server).

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

export default {
  plugins: [
    visualizer({
      emitFile: true,          // let Rollup write the file to the configured output dir
      filename: "stats.html",  // must be a filename only, NOT a path
      template: "treemap",
    }),
  ],
};
// Reports appear under .svelte-kit/output/client/ and .svelte-kit/output/server/
```

--------------------------------

### Configure SvelteKit for Visualizer

Source: https://github.com/btd/rollup-plugin-visualizer/blob/master/README.md

Configure the visualizer plugin in your SvelteKit vite.config.js to emit the report file and specify its filename.

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

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

--------------------------------

### Choose Visualization Template and Output Format

Source: https://context7.com/btd/rollup-plugin-visualizer/llms.txt

The `template` option controls the chart type and output file format. Each template is optimized for different analysis questions. Use `filename` to specify the output file.

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

// treemap (default) — rectangular hierarchy; best for finding large modules quickly
visualizer({ template: "treemap", filename: "stats.html" });

// sunburst — circular hierarchy; click arcs to zoom in
visualizer({ template: "sunburst", filename: "stats.html" });

// treemap-3d — same hierarchy as extruded 3-D boxes with a perspective camera
visualizer({ template: "treemap-3d", filename: "stats.html" });

// flamegraph — top-down call-stack view; familiar from JS profilers
visualizer({ template: "flamegraph", filename: "stats.html" });

// network — force-directed graph; answers "why is this module included?"
// Gray nodes = tree-shaken. Click a node to highlight its importers.
visualizer({ template: "network", filename: "stats.html" });

// raw-data — JSON output consumed by the CLI merger tool
visualizer({ template: "raw-data", filename: "stats.json" });

// list — YAML output suitable for committing and diffing bundle sizes over time
visualizer({ template: "list", filename: "stats.yml" });

// markdown — human- and LLM-readable tables: top modules, bundles, duplicates, packages
visualizer({ template: "markdown", filename: "stats.md" });
```

--------------------------------

### Import Visualizer Plugin

Source: https://github.com/btd/rollup-plugin-visualizer/blob/master/README.md

Import the visualizer function for use in your build configuration. Supports both ES Modules and CommonJS.

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

```javascript
const { visualizer } = require("rollup-plugin-visualizer");
```

--------------------------------

### Configure Vite for Visualizer

Source: https://github.com/btd/rollup-plugin-visualizer/blob/master/README.md

Add the visualizer plugin to your vite.config.js.

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

export default {
  plugins: [visualizer()],
};
```

--------------------------------

### ProjectRoot Option for Path Trimming

Source: https://context7.com/btd/rollup-plugin-visualizer/llms.txt

The `projectRoot` option trims a common prefix from module IDs to shorten paths. It accepts a string or a RegExp and defaults to `process.cwd()`.

```javascript
import { visualizer } from "rollup-plugin-visualizer";
import path from "path";

export default {
  input: "src/index.js",
  output: { dir: "dist" },
  plugins: [
    visualizer({
      // String: strip /home/user/my-project/ prefix from all paths
      projectRoot: path.resolve(__dirname),

      // Or RegExp: strip anything up to and including "packages/core/"
      // projectRoot: /.*\/packages\/core\//,

      template: "treemap",
    }),
  ],
};
// Without projectRoot: "/home/user/my-project/src/utils/format.ts"
// With projectRoot:    "src/utils/format.ts"
```

--------------------------------

### Configure Rollup Plugin Visualizer for Treemap Report

Source: https://context7.com/btd/rollup-plugin-visualizer/llms.txt

Configure the plugin in rollup.config.js to generate a treemap report with gzip/brotli sizes and automatically open the report in the browser after the build.

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

export default {
  input: "src/index.js",
  output: { dir: "dist", format: "esm", sourcemap: true },
  plugins: [
    visualizer({
      filename: "dist/stats.html",   // output path (default: "stats.html")
      title: "My App Bundle",        // HTML <title>
      template: "treemap",           // "treemap" | "sunburst" | "treemap-3d" | "flamegraph" | "network" | "raw-data" | "list" | "markdown"
      open: true,                    // open in browser after build
      gzipSize: true,                // compute gzip sizes
      brotliSize: true,              // compute brotli sizes
      sourcemap: false,              // use source maps for size attribution
      projectRoot: process.cwd(),    // strip this prefix from displayed paths
    }),
  ],
};
// After `rollup -c`, dist/stats.html opens automatically with an interactive treemap.
```

--------------------------------

### CLI Usage for Rollup Plugin Visualizer

Source: https://github.com/btd/rollup-plugin-visualizer/blob/master/README.md

Use the CLI to combine multiple JSON stat files into a single report. View all available options with --help.

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

--------------------------------

### Accurate Post-Minification Sizes via Source Maps

Source: https://context7.com/btd/rollup-plugin-visualizer/llms.txt

When `sourcemap: true` is enabled, module sizes are derived from source map data, providing more accurate sizes after minification. Note that `gzipSize`/`brotliSize` are disabled when `sourcemap` is enabled.

```javascript
// rollup.config.js — accurate post-minification sizes via source maps
import terser from "@rollup/plugin-terser";
import { visualizer } from "rollup-plugin-visualizer";

export default {
  input: "src/index.js",
  output: {
    dir: "dist",
    sourcemap: true,   // required: Rollup must emit source maps
  },
  plugins: [
    terser(),
    visualizer({
      sourcemap: true,          // use source-map attribution
      template: "treemap",
      filename: "dist/stats-sourcemap.html",
      // gzipSize and brotliSize are ineffective here (ignored automatically)
    }),
  ],
};
```

--------------------------------

### Filter Modules Using Include/Exclude Patterns

Source: https://context7.com/btd/rollup-plugin-visualizer/llms.txt

Use `include` and `exclude` options with `Filter` objects containing `bundle` and `file` picomatch patterns to control which modules appear in the report. Omitting `bundle` matches all bundles; omitting `file` matches all files.

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

export default {
  input: "src/index.js",
  output: [
    { file: "dist/main.js",       format: "esm" },
    { file: "dist/vendor.js",     format: "esm" },
    { file: "dist/translation.js",format: "esm" },
  ],
  plugins: [
    visualizer({
      template: "treemap",
      // Only include files from node_modules across all bundles
      include: [{ file: "**/node_modules/**" }],

      // Exclude commonjs helpers and tslib from every bundle
      exclude: [
        { file: "**/commonjsHelpers*" },
        { file: "**/tslib*" },
      ],

      // Pattern combining bundle + file:
      // "translation-*.js:*/**/index.js"
      // means: in any bundle matching "translation-*.js",
      //        only include files matching "*/**/index.js"
      // include: [{ bundle: "translation-*.js", file: "*/**/index.js" }],
    }),
  ],
};
```

--------------------------------

### visualizer(options?)

Source: https://context7.com/btd/rollup-plugin-visualizer/llms.txt

The main factory function for the Rollup Plugin Visualizer. It should be placed last in the `plugins` array of your build configuration to ensure it processes all module sizes after other transforms. It accepts an options object or a function that returns an options object for dynamic configuration.

```APIDOC
## visualizer(options?)

### Description
The sole exported function from `rollup-plugin-visualizer`. Call it inside the `plugins` array of your build config and place it **last** so it sees all module sizes after other transforms have run. It accepts a plain options object or a function `(outputOptions) => options` for dynamic configuration per output.

### Parameters
#### Options Object
- **filename** (string) - Optional - Output path for the report file (default: "stats.html")
- **title** (string) - Optional - HTML document title for the report
- **template** (string) - Optional - The visualization template to use. Options include: "treemap", "sunburst", "treemap-3d", "flamegraph", "network", "raw-data", "list", "markdown" (default: "treemap")
- **open** (boolean) - Optional - Whether to automatically open the report in the browser after the build (default: false)
- **gzipSize** (boolean) - Optional - Whether to compute and display gzip sizes (default: false)
- **brotliSize** (boolean) - Optional - Whether to compute and display Brotli sizes (default: false)
- **sourcemap** (boolean) - Optional - Whether to use source maps for size attribution (default: false)
- **projectRoot** (string) - Optional - A path prefix to strip from displayed file paths, normalizing them relative to the project root (default: `process.cwd()`)
- **emitFile** (boolean) - Optional - When true, lets Rollup manage file output placement. Useful in SvelteKit where Vite might invoke Rollup multiple times. If true, `filename` must be a filename only, not a path.

### Request Example
```javascript
// rollup.config.js
import { visualizer } from "rollup-plugin-visualizer";

export default {
  input: "src/index.js",
  output: { dir: "dist", format: "esm", sourcemap: true },
  plugins: [
    visualizer({
      filename: "dist/stats.html",
      title: "My App Bundle",
      template: "treemap",
      open: true,
      gzipSize: true,
      brotliSize: true,
      sourcemap: false,
      projectRoot: process.cwd(),
    }),
  ],
};
```

### Usage with Vite
```typescript
// vite.config.ts
import { defineConfig, type PluginOption } from "vite";
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  plugins: [
    visualizer({
      filename: "stats.html",
      template: "sunburst",
      gzipSize: true,
    }) as PluginOption,
  ],
  build: {
    sourcemap: true,
  },
});
```

### Usage with Rolldown
```typescript
// rolldown.config.ts
import { defineConfig, type RolldownPlugin } from "rolldown";
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  input: "src/index.ts",
  output: { dir: "dist" },
  plugins: [
    visualizer({
      template: "flamegraph",
      filename: "dist/flame.html",
    }) as RolldownPlugin,
  ],
});
```

### Usage with SvelteKit
```javascript
// vite.config.js (SvelteKit)
import { visualizer } from "rollup-plugin-visualizer";

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

--------------------------------

### Configure Vite + TypeScript for Visualizer

Source: https://github.com/btd/rollup-plugin-visualizer/blob/master/README.md

Add the visualizer plugin to your vite.config.ts. Ensure it's cast to PluginOption.

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

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

--------------------------------

### Configure Rollup for Visualizer

Source: https://github.com/btd/rollup-plugin-visualizer/blob/master/README.md

Add the visualizer plugin to your rollup.config.js. It's recommended to keep it as the last plugin.

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

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

--------------------------------

### Configure Rolldown for Visualizer

Source: https://github.com/btd/rollup-plugin-visualizer/blob/master/README.md

Integrate the visualizer plugin into your rolldown.config.ts. Ensure it's cast to RolldownPlugin.

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

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

--------------------------------

### Merging Multiple Raw-Data Reports with CLI

Source: https://context7.com/btd/rollup-plugin-visualizer/llms.txt

Merge multiple raw-data JSON files into a single HTML chart using the CLI. This is useful for projects with separate build configurations.

```bash
# Step 1: Generate raw-data JSON files from each build config
# rollup.config.client.js uses: visualizer({ template: "raw-data", filename: "stats-client.json" })
# rollup.config.server.js uses: visualizer({ template: "raw-data", filename: "stats-server.json" })

rollup -c rollup.config.client.js
rollup -c rollup.config.server.js

# Step 2: Merge into a single chart
rollup-plugin-visualizer \
  --filename combined-stats.html \
  --template treemap \
  --title "Full App Bundle" \
  --open \
  stats-client.json stats-server.json

# Step 3: combined-stats.html opens in the browser showing both builds together

# All CLI flags:
#   --filename   Output file path (default: ./stats.html)
#   --title      HTML <title> (default: "Rollup Visualizer")
#   --template   Chart type: treemap|sunburst|treemap-3d|flamegraph|network|raw-data|list|markdown
#   --sourcemap  Input files are source-map-derived JSON
#   --open       Open output in default browser after generation
```

--------------------------------

### Manage Output File Emission with Rollup

Source: https://context7.com/btd/rollup-plugin-visualizer/llms.txt

Set `emitFile: true` to use Rollup's `this.emitFile()` API for output, which respects Rollup's output directory. The `filename` must be a bare filename without path separators when `emitFile` is true.

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

export default {
  input: "src/index.js",
  output: { dir: "build/assets", format: "esm" },
  plugins: [
    visualizer({
      emitFile: true,
      filename: "bundle-stats.html",  // ✅ filename only — no "./" or "../"
      template: "treemap",
    }),
    // Output file will be written to build/assets/bundle-stats.html
  ],
};
// ERROR example:
// filename: "./bundle-stats.html"  ❌ will throw: "filename must not be path but a filename"
// filename: "reports/stats.html"  ❌ also rejected when emitFile is true
```

--------------------------------

### Dynamic Options via Function in Rollup Plugin Visualizer

Source: https://context7.com/btd/rollup-plugin-visualizer/llms.txt

Use a function to dynamically set options like filename and template based on Rollup's output options. This allows for different reports per output format.

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

export default {
  input: "src/index.js",
  output: [
    { file: "dist/esm/index.js", format: "esm" },
    { file: "dist/cjs/index.js", format: "cjs" },
  ],
  plugins: [
    visualizer((outputOptions) => ({
      // Generate a separate report for each output format
      filename: `stats-${outputOptions.format ?? "unknown"}.html`,
      template: "treemap",
      title: `Bundle Report — ${outputOptions.format?.toUpperCase()}`,
    })),
  ],
};
// Produces: stats-esm.html and stats-cjs.html
```

--------------------------------

### Integrate Visualizer with Vite for Sunburst Report

Source: https://context7.com/btd/rollup-plugin-visualizer/llms.txt

Add the visualizer plugin to your vite.config.ts to generate a sunburst report. Ensure to cast the plugin to PluginOption for TypeScript compatibility.

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

export default defineConfig({
  plugins: [
    visualizer({
      filename: "stats.html",
      template: "sunburst",   // circular view — great for spotting large deps
      gzipSize: true,
    }) as PluginOption,
  ],
  build: {
    sourcemap: true,
  },
});
// Run: vite build → stats.html generated in project root
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.