CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-webpack-bundle-analyzer

Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap

Overall
score

98%

Overview
Eval results
Files

cli-tool.mddocs/

CLI Tool

The webpack-bundle-analyzer CLI tool provides standalone bundle analysis capabilities for existing webpack stats files. It offers flexible output modes, server functionality, and comprehensive configuration options for analyzing webpack bundles outside of the build process.

Capabilities

Command Line Interface

Analyze webpack bundle stats files using the command line interface.

# Command format
webpack-bundle-analyzer <bundleStatsFile> [bundleDir] [options]

# Basic usage
webpack-bundle-analyzer stats.json

# With bundle directory
webpack-bundle-analyzer stats.json ./dist

# With options
webpack-bundle-analyzer stats.json ./dist --mode static --port 9999

CLI Arguments

interface CLIArguments {
  /** Path to webpack stats JSON file (required) */
  bundleStatsFile: string;
  /** Directory containing generated bundles (optional, defaults to stats file directory) */
  bundleDir?: string;
}

CLI Options

Complete set of command line options for customizing analysis behavior.

interface CLIOptions {
  /** Display version number */
  '-V, --version'?: boolean;
  /** Analysis mode: server, static, or json */
  '-m, --mode <mode>'?: 'server' | 'static' | 'json';
  /** Host for server mode */
  '-h, --host [host]'?: string;
  /** Port for server mode */
  '-p, --port <n>'?: number | 'auto';
  /** Output file path for static/json modes */
  '-r, --report <file>'?: string;
  /** Report title */
  '-t, --title <title>'?: string;
  /** Default size type to display */
  '-s, --default-sizes <type>'?: 'stat' | 'parsed' | 'gzip';
  /** Don't open browser automatically */
  '-O, --no-open'?: boolean;
  /** Asset exclusion patterns */
  '-e, --exclude <regexp>'?: string[];
  /** Log level */
  '-l, --log-level <level>'?: 'debug' | 'info' | 'warn' | 'error' | 'silent';
  /** Display help */
  '-h, --help'?: boolean;
}

Usage Examples:

# Generate webpack stats file
webpack --profile --json > stats.json

# Basic analysis with server mode (default)
webpack-bundle-analyzer stats.json

# Static HTML report
webpack-bundle-analyzer stats.json --mode static --report bundle-report.html

# JSON report
webpack-bundle-analyzer stats.json --mode json --report bundle-data.json

# Custom server configuration
webpack-bundle-analyzer stats.json --mode server --host 0.0.0.0 --port 8080

# With asset exclusions
webpack-bundle-analyzer stats.json --exclude vendor --exclude "\.css$"

# Silent mode with custom title
webpack-bundle-analyzer stats.json --log-level silent --title "Production Bundle"

Server Mode

Start an HTTP server with interactive bundle visualization.

# Server mode options
webpack-bundle-analyzer stats.json [bundleDir] \
  --mode server \
  --host <host> \
  --port <port> \
  --default-sizes <type> \
  --title <title> \
  --exclude <pattern> \
  --log-level <level>

Default Values:

  • Host: 127.0.0.1
  • Port: 8888
  • Default sizes: parsed
  • Auto-open browser: true

Usage Examples:

# Basic server
webpack-bundle-analyzer stats.json

# Custom host and port
webpack-bundle-analyzer stats.json --host localhost --port 9999

# Auto-assign port
webpack-bundle-analyzer stats.json --port auto

# Don't open browser
webpack-bundle-analyzer stats.json --no-open

# Show gzipped sizes by default
webpack-bundle-analyzer stats.json --default-sizes gzip

Static Mode

Generate a single HTML file with embedded bundle visualization.

# Static mode options
webpack-bundle-analyzer stats.json [bundleDir] \
  --mode static \
  --report <filename> \
  --title <title> \
  --default-sizes <type> \
  --exclude <pattern> \
  --no-open

Default Values:

  • Report filename: report.html
  • Auto-open browser: true

Usage Examples:

# Basic static report
webpack-bundle-analyzer stats.json --mode static

# Custom filename
webpack-bundle-analyzer stats.json --mode static --report my-bundle-report.html

# Don't open browser
webpack-bundle-analyzer stats.json --mode static --no-open

# Custom title
webpack-bundle-analyzer stats.json --mode static --title "Production Bundle Analysis"

JSON Mode

Generate a JSON file with bundle analysis data.

# JSON mode options
webpack-bundle-analyzer stats.json [bundleDir] \
  --mode json \
  --report <filename> \
  --exclude <pattern> \
  --log-level <level>

Default Values:

  • Report filename: report.json

Usage Examples:

# Basic JSON report
webpack-bundle-analyzer stats.json --mode json

# Custom filename
webpack-bundle-analyzer stats.json --mode json --report bundle-data.json

# Silent mode
webpack-bundle-analyzer stats.json --mode json --log-level silent

Asset Exclusion

Exclude specific assets from bundle analysis using regular expression patterns.

# Single exclusion pattern
webpack-bundle-analyzer stats.json --exclude <pattern>

# Multiple exclusion patterns
webpack-bundle-analyzer stats.json --exclude <pattern1> --exclude <pattern2>

Usage Examples:

# Exclude vendor files
webpack-bundle-analyzer stats.json --exclude vendor

# Exclude CSS files
webpack-bundle-analyzer stats.json --exclude "\.css$"

# Multiple exclusions
webpack-bundle-analyzer stats.json --exclude vendor --exclude "\.css$" --exclude runtime

Log Level Control

Control the verbosity of CLI output.

# Available log levels
type LogLevel = 'debug' | 'info' | 'warn' | 'error' | 'silent';

# Usage
webpack-bundle-analyzer stats.json --log-level <level>

Log Levels:

  • debug: Show all messages including debug information
  • info: Show informational messages and above (default)
  • warn: Show warnings and errors only
  • error: Show errors only
  • silent: Suppress all output

Usage Examples:

# Debug mode
webpack-bundle-analyzer stats.json --log-level debug

# Silent mode
webpack-bundle-analyzer stats.json --log-level silent

# Warnings and errors only
webpack-bundle-analyzer stats.json --log-level warn

Size Type Selection

Choose which size metric to display by default in the visualization.

type SizeType = 'stat' | 'parsed' | 'gzip';

# Usage
webpack-bundle-analyzer stats.json --default-sizes <type>

Size Types:

  • stat: Original file sizes from webpack stats (before transformations)
  • parsed: Actual parsed bundle sizes (after minification/optimization)
  • gzip: Gzipped sizes of the parsed bundles

Usage Examples:

# Show original sizes
webpack-bundle-analyzer stats.json --default-sizes stat

# Show parsed sizes (default)
webpack-bundle-analyzer stats.json --default-sizes parsed

# Show gzipped sizes
webpack-bundle-analyzer stats.json --default-sizes gzip

Install with Tessl CLI

npx tessl i tessl/npm-webpack-bundle-analyzer

docs

analysis-engine.md

cli-tool.md

index.md

report-generation.md

webpack-plugin.md

tile.json