# Bundler Analyze

> Analyze JS bundle size with Vite/Webpack analyzers Use when this capability is needed.

- Skill: `tomevault-io/bundler-analyze` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/bundler-analyze`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/bundler-analyze/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/bundler-analyze

---

# Bundle Analyzer

Use the **bash** tool to analyze JavaScript bundle sizes.

## Setup

**Node.js** (required for npx):
- **macOS**: `brew install node`
- **Ubuntu**: `sudo apt install nodejs npm`

Run `npm run build` first to generate stats; then use npx with vite-bundle-visualizer, webpack-bundle-analyzer, etc.

## Vite
```bash
npx vite-bundle-visualizer 2>/dev/null
# generates stats.html

npx rollup-plugin-visualizer 2>/dev/null
```

## Webpack
```bash
npx webpack-bundle-analyzer stats.json 2>/dev/null
# First generate stats:
npx webpack --profile --json > stats.json
```

## Size Check (quick)
```bash
# Check build output sizes
ls -lhS dist/assets/*.js 2>/dev/null | head -20
ls -lhS dist/assets/*.css 2>/dev/null | head -10

# Total bundle size
du -sh dist/ 2>/dev/null
```

## Import Cost
```bash
npx import-cost <file.ts> 2>/dev/null
```

## Tips
- Run after npm run build to see actual production sizes
- Check for large dependencies with npm ls --depth=0
- Use dynamic import() for code splitting
- Compare sizes before/after changes

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/jholhewres) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->