@viz-kit/esbuild-analyzer

Interactive bundle analyzer for any JavaScript build output (Angular, React, Vue, Vite, Webpack, Rollup, esbuild, etc). Uses source maps to attribute bytes to original files, then renders an interactive treemap (ECharts) with raw and gzip sizes.

Features

• Framework-agnostic: point to any folder with .js and .js.map
• Accurate size attribution via source map mappings
• Treemap UI with search, module toggles, breadcrumbs, zoom
• Tooltips show raw and gzip per node; folders aggregate automatically
• JSON/HTML report generation via CLI

Install

npm i -g @viz-kit/esbuild-analyzer

Or as a dev dependency:

npm i -D @viz-kit/esbuild-analyzer

Quick start

Analyze a build folder (example path shown):

esbuild-analyzer \
  "/path/to/your/dist" \
  --port 8888

• Opens http://localhost:8888 with the interactive report
• Left sidebar lists top-level bundles (toggle to filter)
• Search filters the module list; click a file result to zoom

CLI usage

esbuild-analyzer <distPath> [options]

Options:
  --json <out>   Export raw stats to a JSON file
  --html <out>   Export a static HTML file with embedded stats
  --port <port>  Port for the local server (default: 8888)
  -h, --help     Show help

Examples:

# Run interactive UI only
esbuild-analyzer ./dist --port 9000

# Export machine-readable JSON
esbuild-analyzer ./dist --json stats.json

# Export a quick static HTML snapshot
esbuild-analyzer ./dist --html report.html

Interpreting the UI

• Each rectangle is a folder/file; area encodes size
• Hover shows: path, raw size, gzip size
• Click to zoom; use breadcrumb to go back
• Module checkboxes filter which top-level bundles are visualized

Requirements

• Node.js >= 18
• Build output folder should include source maps (.map) next to .js files
  • Without maps, bytes will be attributed to (unmapped)

Enabling production source maps

• Vite: set build.sourcemap = true
• Angular: ng build --source-map=true
• Webpack: devtool: 'source-map' (or equivalent)
• esbuild: sourcemap: true

Local development

Clone and run:

npm install
npm run dev      # Runs the UI (Vite) at http://localhost:5173
npm run build    # Builds CLI and UI

Then run the analyzer against any dist folder:

node dist/cli.js "/path/to/your/dist" --port 8888

Troubleshooting

• Large white areas or missing files: likely missing/partial source maps
• Only node_modules shown: your app code may be concatenated or minified without maps
• Gzip per-node is an estimate using the bundle-level gzip/raw ratio

License

MIT © 2025-present