tessl/npm-rollup-plugin-visualizer

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

—

Pending

Overview

Eval results

Files

Plugin Configuration

Name: tessl/npm-rollup-plugin-visualizer
Author: tessl

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

import { visualizer, PluginVisualizerOptions } from "rollup-plugin-visualizer";
import { Plugin, OutputOptions } from "rollup";
import { Options as OpenOptions } from "open";

Capabilities

Visualizer Function

Creates a Rollup plugin instance for bundle visualization and analysis.

import { Plugin, OutputOptions } from "rollup";

/**
 * Creates a Rollup plugin instance for bundle visualization and analysis
 * @param opts - Configuration options or function returning options
 * @returns Rollup plugin instance
 */
function visualizer(
  opts?: PluginVisualizerOptions | ((outputOptions: OutputOptions) => PluginVisualizerOptions)
): Plugin;

The visualizer function is the main entry point that accepts either static configuration options or a function that receives Rollup's output options and returns configuration.

Usage Examples:

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

// Static configuration
export default {
  plugins: [
    visualizer({
      filename: 'bundle-stats.html',
      template: 'treemap',
      open: true
    })
  ]
};

// Dynamic configuration based on output options
export default {
  plugins: [
    visualizer((outputOptions) => ({
      filename: `${outputOptions.dir}/stats.html`,
      template: outputOptions.format === 'es' ? 'network' : 'treemap'
    }))
  ]
};

Plugin Options Interface

Complete configuration interface for the visualizer plugin.

import { Options as OpenOptions } from "open";

interface PluginVisualizerOptions {
  /** Output file name or path (default: "stats.html") */
  filename?: string;
  
  /** DEPRECATED: Use template: "raw-data" instead */
  json?: boolean;
  
  /** HTML title for generated file (default: "Rollup Visualizer") */
  title?: string;
  
  /** Open generated file in browser (default: false) */
  open?: boolean;
  
  /** Options for opening file */
  openOptions?: OpenOptions;
  
  /** Visualization template type (default: "treemap") */
  template?: TemplateType;
  
  /** Calculate gzipped sizes (default: false) */
  gzipSize?: boolean;
  
  /** Calculate brotli sizes (default: false) */
  brotliSize?: boolean;
  
  /** Use sourcemaps for size calculation (default: false) */
  sourcemap?: boolean;
  
  /** Project root path for file path normalization */
  projectRoot?: string | RegExp;
  
  /** Use rollup's emitFile API (default: false) */
  emitFile?: boolean;
  
  /** Inclusion filters */
  include?: Filter | Filter[];
  
  /** Exclusion filters */
  exclude?: Filter | Filter[];
}

Key Configuration Options:

filename: Controls output file location. When using emitFile: true, must be filename only, not a path.
template: Chooses visualization type. Each template provides different insights:
- treemap: Best for finding large modules (rectangular layout)
- sunburst: Hierarchical circular view, good for deep dependency trees
- network: Shows dependency relationships, answers "why is this included?"
- flamegraph: Familiar to developers, top-down hierarchical view
- raw-data: JSON output for programmatic analysis
- list: YAML output for tracking changes
gzipSize/brotliSize: Add compression analysis (cannot be used with sourcemap)
sourcemap: Use sourcemaps for more accurate size analysis
emitFile: Integrate with Rollup's file emission system instead of writing files directly

Advanced Configuration Examples:

// Production build with compression analysis
visualizer({
  filename: 'dist/bundle-analysis.html',
  template: 'treemap',
  gzipSize: true,
  brotliSize: true,
  open: false
})

// Development with network diagram
visualizer({
  filename: 'dev-stats.html',
  template: 'network',
  open: true,
  sourcemap: true
})

// JSON output for CI/CD integration
visualizer({
  filename: 'stats.json',
  template: 'raw-data',
  emitFile: true
})

// With filtering
visualizer({
  filename: 'filtered-stats.html',
  template: 'sunburst',
  exclude: [
    { file: 'node_modules/**' }, // Exclude all node_modules
    { bundle: 'vendor-*' }       // Exclude vendor bundles
  ]
})

Template Types

Available visualization template types for different analysis needs.

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

Each template serves different analysis purposes:

sunburst: Circular hierarchical diagram for finding large pieces and understanding structure
treemap: Rectangular hierarchical diagram, excellent for spotting large modules and duplicates
network: Force-directed graph showing dependency relationships
raw-data: JSON output containing all analysis data
list: YAML format suitable for version control tracking
flamegraph: Top-down hierarchical view familiar from profiling tools

Open Options

Configuration for automatically opening generated files.

/**
 * Options for opening files with the 'open' package
 */
interface OpenOptions {
  /** App name or array of app names/arguments to open with */
  app?: string | string[];
  /** Wait for opened app to exit before calling callback */
  wait?: boolean;
  /** Do not bring the app to the foreground (macOS only) */
  background?: boolean;
  /** Open new instance of app even if one is already running */
  newInstance?: boolean;
  /** Allow app to exit with non-zero exit code */
  allowNonzeroExit?: boolean;
}

Used with the open option to customize how generated files are opened in the browser or other applications.

Install with Tessl CLI

npx tessl i tessl/npm-rollup-plugin-visualizer

docs

plugin-configuration.md

tile.json

tessl/npm-rollup-plugin-visualizer