tessl/npm-rollup-plugin-visualizer

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

—

Pending

Overview

Eval results

Files

CLI Utility

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

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

The CLI utility does not require imports as it's accessed directly as a binary, but processes data files in the VisualizerData format.

Capabilities

CLI Binary

Standalone command-line tool for combining multiple JSON stats files into a single visualization.

// CLI binary available at: rollup-plugin-visualizer
// Installation provides global binary access

The CLI utility is installed as a binary when you install the package and can be accessed directly from the command line. It's particularly useful for combining analysis from multiple build configurations or comparing different builds.

Basic Usage:

# Process single stats file
rollup-plugin-visualizer stats.json

# Combine multiple stats files
rollup-plugin-visualizer stats1.json stats2.json stats3.json

# Custom output and template
rollup-plugin-visualizer --filename combined-stats.html --template network *.json

# Open result automatically
rollup-plugin-visualizer --open --template treemap build-*/stats.json

CLI Options

Command-line options for customizing the output and behavior.

interface CliOptions {
  /** Output file name (default: "./stats.html") */
  filename: string;
  
  /** Output file title (default: "Rollup Visualizer") */
  title: string;
  
  /** Template type for visualization */
  template: TemplateType;
  
  /** Process files as sourcemap-based data (default: false) */
  sourcemap: boolean;
  
  /** Open generated file in default application (default: false) */
  open: boolean;
}

CLI Option Details:

--filename: Specifies the output file path and name
--title: Sets the HTML title for the generated visualization
--template: Chooses visualization type (sunburst, treemap, network, raw-data, list, flamegraph)
--sourcemap: Process input files as sourcemap-based visualization data
--open: Automatically opens the generated file in the default browser/application

Usage Examples:

# Generate network diagram with custom title
rollup-plugin-visualizer \
  --filename "dependency-analysis.html" \
  --title "Project Dependency Analysis" \
  --template network \
  build-stats.json

# Create combined treemap from multiple builds
rollup-plugin-visualizer \
  --filename "combined-analysis.html" \
  --template treemap \
  --open \
  dev-stats.json prod-stats.json

# Export raw data for further processing
rollup-plugin-visualizer \
  --filename "combined-data.json" \
  --template raw-data \
  stats/*.json

# Generate list format for version control
rollup-plugin-visualizer \
  --filename "bundle-manifest.yml" \
  --template list \
  production-stats.json

CLI Workflow Integration

Common patterns for integrating the CLI into development and CI/CD workflows.

Multi-Configuration Analysis:

# Build different configurations
npm run build:dev   # Generates dev-stats.json
npm run build:prod  # Generates prod-stats.json

# Combine for comparison
rollup-plugin-visualizer \
  --filename "build-comparison.html" \
  --template treemap \
  --title "Dev vs Prod Bundle Analysis" \
  dev-stats.json prod-stats.json

CI/CD Integration:

#!/bin/bash
# In CI/CD pipeline

# Generate stats during build
npm run build -- --plugin-visualizer-template=raw-data

# Combine with historical data
rollup-plugin-visualizer \
  --filename "trend-analysis.html" \
  --template network \
  current-stats.json \
  artifacts/previous-stats.json

# Archive for trend analysis
cp current-stats.json "artifacts/stats-$(date +%Y%m%d).json"

Development Workflow:

# Development script combining multiple entry points
rollup-plugin-visualizer \
  --filename "dev-analysis.html" \
  --template sunburst \
  --open \
  main-stats.json \
  worker-stats.json \
  vendor-stats.json

Data File Compatibility

The CLI processes JSON files generated by the plugin's raw-data template.

// Input file format (generated by template: "raw-data")
interface InputStatsFile {
  version: number;
  tree: ModuleTree;
  nodeParts: Record<ModuleUID, ModulePart>;
  nodeMetas: Record<ModuleUID, ModuleMeta>;
  env: { [key: string]: unknown };
  options: { gzip: boolean; brotli: boolean; sourcemap: boolean };
}

Generating Compatible Files:

// In rollup.config.js - generate data files for CLI
visualizer({
  filename: 'build-stats.json',
  template: 'raw-data'
})

Version Compatibility:

The CLI checks version compatibility between data files and will skip files with incompatible versions, logging warnings for skipped files.

Error Handling

Common error scenarios and troubleshooting:

# No input files provided
rollup-plugin-visualizer
# Error: Empty file list

# Invalid JSON files
rollup-plugin-visualizer invalid.json
# Error: Failed to parse JSON

# Version mismatch
rollup-plugin-visualizer old-format.json
# Warning: Version in old-format.json is not supported (1). Current version 2. Skipping...

# File not found
rollup-plugin-visualizer missing.json
# Error: ENOENT: no such file or directory

Help and Documentation

# Display help information
rollup-plugin-visualizer --help

# Lists all available options and usage examples

The CLI provides comprehensive help documentation including all available options, template choices, and usage examples.

Install with Tessl CLI

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

docs

plugin-configuration.md

tile.json