or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cli-utility.mddata-types.mdfilter-system.mdindex.mdplugin-configuration.md
tile.json

tessl/npm-rollup-plugin-visualizer

Visualize and analyze your Rollup bundle to see which modules are taking up space

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/rollup-plugin-visualizer@6.0.x

To install, run

npx @tessl/cli install tessl/npm-rollup-plugin-visualizer@6.0.0

index.mddocs/

Rollup Plugin Visualizer

Rollup Plugin Visualizer provides comprehensive bundle analysis and visualization for Rollup, Vite, and other build tools. It generates interactive charts and diagrams to help identify large modules, understand dependency relationships, and optimize bundle size through multiple visualization templates including treemap, sunburst, network diagrams, and flamegraphs.

Package Information

  • Package Name: rollup-plugin-visualizer
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install --save-dev rollup-plugin-visualizer

Core Imports

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

For CommonJS:

const { visualizer } = require("rollup-plugin-visualizer");
// or
const visualizer = require("rollup-plugin-visualizer").default;

Basic Usage

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

export default {
  plugins: [
    // Put it last in plugins array
    visualizer({
      filename: 'stats.html',
      template: 'treemap',
      open: true,
      gzipSize: true
    })
  ]
};

With Vite:

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

export default defineConfig({
  plugins: [
    visualizer({
      filename: 'dist/stats.html',
      template: 'sunburst'
    }) as PluginOption
  ]
});

Architecture

Rollup Plugin Visualizer is built around several key components:

  • Plugin Factory: Main visualizer function that creates Rollup plugin instances
  • Template Engine: Multiple visualization templates (treemap, sunburst, network, flamegraph, etc.)
  • Data Processing: Module tree building, sourcemap analysis, and size calculation
  • Filter System: Include/exclude patterns for selective analysis
  • CLI Utility: Standalone tool for combining multiple bundle analyses
  • Compression Analysis: Optional gzip/brotli size calculation

Capabilities

Plugin Configuration

Core plugin factory function and configuration options for creating bundle visualization plugins.

import { Plugin, OutputOptions } from "rollup";
import { Options as OpenOptions } from "open";

function visualizer(
  opts?: PluginVisualizerOptions | ((outputOptions: OutputOptions) => PluginVisualizerOptions)
): Plugin;

interface PluginVisualizerOptions {
  filename?: string;
  json?: boolean; // DEPRECATED: use template: "raw-data"
  title?: string;
  open?: boolean;
  openOptions?: OpenOptions;
  template?: TemplateType;
  gzipSize?: boolean;
  brotliSize?: boolean;
  sourcemap?: boolean;
  projectRoot?: string | RegExp;
  emitFile?: boolean;
  include?: Filter | Filter[];
  exclude?: Filter | Filter[];
}

Plugin Configuration

Data Types and Structures

Core type definitions for module trees, bundle data, and visualization information used throughout the plugin.

interface VisualizerData {
  version: number;
  tree: ModuleTree;
  nodeParts: Record<ModuleUID, ModulePart>;
  nodeMetas: Record<ModuleUID, ModuleMeta>;
  env: { [key: string]: unknown };
  options: { gzip: boolean; brotli: boolean; sourcemap: boolean };
}

interface ModuleTree {
  name: string;
  children: Array<ModuleTree | ModuleTreeLeaf>;
}

type TemplateType = "sunburst" | "treemap" | "network" | "raw-data" | "list" | "flamegraph";

Data Types

Filter System

Module filtering functionality for selective bundle analysis based on bundle names and file patterns.

function createFilter(
  include: Filter | Filter[] | undefined,
  exclude: Filter | Filter[] | undefined
): (bundleId: string, id: string) => boolean;

type Filter = {
  bundle?: string | null | undefined;
  file?: string | null | undefined;
};

Filter System

CLI Utility

Command-line interface for processing and combining multiple visualization data files into unified analysis.

// CLI binary available at: rollup-plugin-visualizer
// Usage: rollup-plugin-visualizer [OPTIONS] stat1.json stat2.json

CLI Utility

Types

type ModuleUID = string;
type BundleId = string;
type SizeKey = "renderedLength" | "gzipLength" | "brotliLength";

interface ModuleLengths {
  renderedLength: number;
  gzipLength: number;
  brotliLength: number;
}

interface ModuleTreeLeaf {
  name: string;
  uid: ModuleUID;
}