bundle-analyzelisted

# Bundle Size Analysis & Optimization I'll analyze your JavaScript bundle size, identify large dependencies, suggest tree-shaking opportunities, and recommend code splitting strategies. **Supported Build Tools:** - Webpack (webpack-bundle-analyzer) - Vite (rollup-plugin-visualizer) - esbuild (esbuild-visualizer) - Rollup (rollup-plugin-visualizer) - Next.js (@next/bundle-analyzer) **Arguments:** `$ARGUMENTS` - optional: production/development or specific entry point <think> Bundle optimization requires understanding: - JavaScript bundle composition and size impact - Tree-shaking effectiveness - Code splitting strategies - Lazy loading opportunities - Dependency bloat identification - Framework-specific optimization patterns </think> --- ## Token Optimization This skill uses efficient patterns to minimize token consumption during bundle analysis and optimization recommendations. ### Optimization Strategies #### 1. Build Tool Detection Caching (Saves 600 tokens per invocation) Cache detected build tool and framework to avoid repeated package.json analysis: ```bash CACHE_FILE=".claude/cache/bundle-analyze/build-tool.json" CACHE_TTL=86400 # 24 hours (build config rarely changes) mkdir -p .claude/cache/bundle-analyze if [ -f "$CACHE_FILE" ]; then CACHE_AGE=$(($(date +%s) - $(stat -c %Y "$CACHE_FILE" 2>/dev/null || stat -f %m "$CACHE_FILE" 2>/dev/null))) if [ $CACHE_AGE -lt $CACHE_TTL ]; then # Use cached build tool info BUILD_TOOL=$(jq -r '.b