bundler-analyze

Files (1)

• SKILL.md

SKILL.md (first lines)

# 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

From jholhewres/devclaw-skills, MIT.

More from jholhewres/devclaw-skills