#What it does

The /bundle-analyze skill examines your JavaScript bundles to find what is making them large. It identifies oversized dependencies, unused exports, duplicate packages, and missing code-splitting opportunities. The goal is a smaller initial load and faster time-to-interactive.

#How to use

/bundle-analyze

Run it at the project root. It reads your build configuration (Next.js, Vite, Webpack) and analyzes the output.

#What it checks

• Heavy imports -- Full library imports where only a few functions are used (e.g., importing all of lodash instead of lodash/get)
• Duplicate dependencies -- Multiple versions of the same package bundled together
• Unused exports -- Exported functions or components that no consumer imports
• Missing dynamic imports -- Large components loaded synchronously that should use React.lazy() or next/dynamic
• Polyfill waste -- Polyfills included for browsers you don't support
• Asset inlining -- Large assets (SVGs, JSON) embedded in JS that should be loaded separately

#Workflow

1. Build -- Runs a production build to generate accurate bundle data
2. Parse -- Analyzes the bundle composition by package and module
3. Compare -- Checks each dependency against known lightweight alternatives
4. Report -- Produces a ranked list of savings opportunities with effort estimates

#Example

> /bundle-analyze
 
## Bundle Analysis: 847 KB total (gzipped)
 
### Top savings opportunities
 
| Package        | Current | After fix | Savings | Effort |
|---------------|---------|-----------|---------|--------|
| date-fns      | 68 KB   | 12 KB     | 56 KB   | Low    |
| react-icons   | 45 KB   | 3 KB      | 42 KB   | Low    |
| framer-motion | 89 KB   | 34 KB     | 55 KB   | Medium |
 
### Recommendations
 
1. Replace `import { format } from 'date-fns'` with direct subpath import
2. Use specific icon imports: `react-icons/fi/FiCheck` instead of `react-icons/fi`
3. Lazy-load framer-motion on pages that use animations
 
Potential total savings: ~153 KB (18% reduction)