gh-claudeforge-marketplace-plugins-commands-bundle-analyzer/commands/bundle-analyzer.md

---
allowed-tools: Bash, Read, Write, Edit, Grep, Glob
description: ClaudeForge bundle size analysis and optimization specialist for webpack, rollup, and modern build tools.
---

# ClaudeForge Bundle Analyzer

ClaudeForge intelligent bundle analysis system that identifies, analyzes, and optimizes JavaScript bundle sizes with comprehensive visualization, tree shaking recommendations, and automated code splitting strategies.

## Purpose

Transform bundle optimization from manual investigation to intelligent automation that ensures optimal application performance, minimal load times, and efficient code delivery across modern web applications.

## Features

- **Bundle Analysis**: Deep analysis of webpack, rollup, and vite bundles with visual dependency graphs
- **Size Optimization**: Identify and eliminate bloated dependencies and unused code
- **Tree Shaking**: Optimize tree shaking configuration for maximum dead code elimination
- **Code Splitting**: Intelligent code splitting strategies for optimal chunk sizes
- **Dependency Audit**: Analyze dependency tree and identify duplicate or redundant packages
- **Performance Metrics**: Measure real-world performance impact with Web Vitals integration
- **Report Generation**: Comprehensive reports with actionable optimization recommendations
- **CI/CD Integration**: Automated bundle size monitoring in continuous integration pipelines

## Usage

```bash
/bundle-analyzer [command] [options]
```

Target: $ARGUMENTS (if specified, otherwise analyze current build output)

### Analysis Commands

**Full Bundle Analysis:**
```bash
/bundle-analyzer analyze --build-dir=dist --format=html
```
Generates comprehensive bundle analysis including:
- Visual treemap of bundle composition
- Module size breakdown by category
- Duplicate dependency detection
- Largest modules and optimization opportunities
- Import cost analysis
- Bundle size trends over time

**Webpack Bundle Analysis:**
```bash
/bundle-analyzer webpack --stats-file=stats.json --threshold=500kb
```
Analyzes webpack bundles with:
- webpack-bundle-analyzer integration
- Chunk size analysis and optimization
- Module concatenation opportunities
- Dynamic import boundary detection
- Vendor bundle optimization
- SplitChunks configuration recommendations

**Source Map Explorer:**
```bash
/bundle-analyzer source-map --bundle=main.js --output=report.html
```
Uses source-map-explorer for:
- Visual representation of bundle content
- Source file size attribution
- Library version detection
- Minification effectiveness analysis
- Gzip/Brotli compression preview

### Optimization Commands

**Tree Shaking Optimization:**
```bash
/bundle-analyzer tree-shake --aggressive --side-effects-check
```
Optimizes tree shaking with:
- Side effects analysis and package.json validation
- ESM module format verification
- Import statement optimization
- Unused export detection
- Babel configuration recommendations
- Package.json sideEffects configuration

**Code Splitting Strategy:**
```bash
/bundle-analyzer code-split --strategy=route-based --max-chunk=250kb
```
Implements intelligent code splitting:
- Route-based splitting for SPA applications
- Component-level splitting with React.lazy/Vue async
- Vendor bundle separation strategies
- Common chunk extraction optimization
- Dynamic import insertion points
- Prefetch/preload directive generation

**Dependency Optimization:**
```bash
/bundle-analyzer dependencies --find-duplicates --suggest-alternatives
```
Optimizes dependency usage:
- Duplicate dependency detection and resolution
- Lighter alternative library suggestions
- Peer dependency conflict resolution
- Bundle phobia integration for size checking
- Package.json dependency audit
- Monorepo workspace optimization

### Advanced Features

**Performance Budget:**
```bash
/bundle-analyzer budget --max-initial=500kb --max-route=250kb --fail-on-breach
```
Enforces performance budgets with:
- Initial bundle size limits
- Per-route chunk size constraints
- Asset size monitoring (images, fonts, etc.)
- CI/CD integration for automated checks
- Historical size tracking
- Budget breach notifications

**Compression Analysis:**
```bash
/bundle-analyzer compress --algorithms=gzip,brotli,zstd --level=11
```
Analyzes compression effectiveness:
- Multiple compression algorithm comparison
- Compression ratio analysis
- Pre-compression build plugin recommendations
- CDN compression configuration
- Content-encoding header validation

**Import Cost Analysis:**
```bash
/bundle-analyzer imports --annotate --threshold=50kb
```
Provides import-level insights:
- Per-import size calculation
- Named vs default import optimization
- Import statement annotations in source
- Barrel export detection and optimization
- Module replacement recommendations

## Analysis Methodologies

### Bundle Size Metrics

**Core Web Vitals Impact:**
- **First Contentful Paint (FCP)**: Initial bundle load time impact
- **Largest Contentful Paint (LCP)**: Critical resource optimization
- **Time to Interactive (TTI)**: JavaScript parse and execution cost
- **Total Blocking Time (TBT)**: Main thread blocking analysis
- **Cumulative Layout Shift (CLS)**: Dynamic import layout impact

**Size Categories:**
- **Initial Bundle**: Critical path JavaScript for first render
- **Route Chunks**: Lazy-loaded route-specific code
- **Vendor Bundles**: Third-party library code
- **Shared Chunks**: Common code across multiple routes
- **Async Chunks**: Dynamically imported modules

### Optimization Strategies

**Tree Shaking Excellence:**
```javascript
// Bad: CommonJS imports prevent tree shaking
const _ = require('lodash');
const cloneDeep = _.cloneDeep;

// Good: ESM named imports enable tree shaking
import { cloneDeep } from 'lodash-es';

// Best: Direct function imports minimize bundle size
import cloneDeep from 'lodash-es/cloneDeep';
```

**Code Splitting Patterns:**
```javascript
// Route-based splitting
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Profile = lazy(() => import('./pages/Profile'));

// Component-based splitting with prefetch
const HeavyChart = lazy(() => import(
  /* webpackChunkName: "chart" */
  /* webpackPrefetch: true */
  './components/HeavyChart'
));

// Dynamic import with error boundary
const loadModule = () => import('./module').catch(err => {
  console.error('Module load failed:', err);
  return { default: FallbackComponent };
});
```

**Webpack Configuration Optimization:**
```javascript
// Optimal SplitChunks configuration
optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name(module) {
          const packageName = module.context.match(
            /[\\/]node_modules[\\/](.*?)([\\/]|$)/
          )[1];
          return `vendor.${packageName.replace('@', '')}`;
        },
        priority: 10
      },
      common: {
        minChunks: 2,
        priority: 5,
        reuseExistingChunk: true,
        enforce: true
      }
    }
  },
  runtimeChunk: 'single',
  moduleIds: 'deterministic'
}
```

## Tool Integration

### Webpack Bundle Analyzer

**Installation and Setup:**
```bash
npm install --save-dev webpack-bundle-analyzer
```

**Configuration:**
```javascript
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      reportFilename: 'bundle-report.html',
      openAnalyzer: false,
      generateStatsFile: true,
      statsFilename: 'bundle-stats.json'
    })
  ]
};
```

### Source Map Explorer

**Analysis Workflow:**
```bash
# Generate source maps
npm run build -- --source-map

# Analyze main bundle
npx source-map-explorer dist/main.*.js --html dist/sme-report.html

# Compare bundles
npx source-map-explorer dist/*.js --only-mapped
```

### Bundle Phobia Integration

**Dependency Size Checking:**
```bash
# Check package size before installation
npx bundle-phobia moment

# Compare alternatives
npx bundle-phobia moment date-fns dayjs

# Size impact analysis
npx bundle-phobia --interactive
```

## Performance Optimization Techniques

### Dependency Management

**Library Alternatives:**
- **moment.js (67KB)** → **date-fns (13KB)** or **dayjs (2KB)**
- **lodash (71KB)** → **lodash-es (24KB)** with tree shaking
- **axios (13KB)** → **native fetch** with polyfill (0KB modern browsers)
- **jquery (87KB)** → **vanilla JS** or **cash (6KB)**
- **core-js (90KB)** → **targeted polyfills** with browserslist

**Tree Shaking Optimization:**
```json
{
  "sideEffects": [
    "*.css",
    "*.scss",
    "./src/polyfills.js"
  ]
}
```

### Build Tool Configuration

**Vite Optimization:**
```javascript
// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'react-vendor': ['react', 'react-dom'],
          'ui-vendor': ['@mui/material', '@mui/icons-material'],
          'utils': ['lodash-es', 'date-fns']
        }
      }
    },
    chunkSizeWarningLimit: 500,
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  }
};
```

**Rollup Optimization:**
```javascript
// rollup.config.js
export default {
  plugins: [
    terser({
      compress: {
        passes: 2,
        pure_getters: true,
        unsafe: true
      },
      mangle: {
        safari10: true
      }
    }),
    visualizer({
      filename: 'bundle-analysis.html',
      gzipSize: true,
      brotliSize: true
    })
  ]
};
```

## CI/CD Integration

### GitHub Actions Workflow

```yaml
name: Bundle Size Check

on: [pull_request]

jobs:
  bundle-size:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3

      - name: Install dependencies
        run: npm ci

      - name: Build and analyze
        run: npm run build

      - name: Analyze bundle size
        uses: andresz1/size-limit-action@v1
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          limit: "500 KB"

      - name: Comment PR with bundle report
        uses: marocchino/sticky-pull-request-comment@v2
        with:
          path: bundle-report.md
```

### Size Limit Configuration

```json
{
  "size-limit": [
    {
      "name": "Initial Bundle",
      "path": "dist/main.*.js",
      "limit": "500 KB",
      "gzip": true
    },
    {
      "name": "Total App Size",
      "path": "dist/**/*.js",
      "limit": "1.5 MB",
      "gzip": true
    }
  ]
}
```

## Reporting and Visualization

### HTML Report Generation

**Comprehensive Analysis Report:**
- Bundle composition treemap visualization
- Size breakdown by module category
- Dependency graph with version information
- Optimization recommendations ranked by impact
- Historical size trend charts
- Compression effectiveness analysis

### Command Line Output

**Summary Statistics:**
```
Bundle Analysis Summary
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Total Bundle Size: 1.2 MB (489 KB gzipped)
Initial Load: 456 KB (189 KB gzipped)
Lazy Chunks: 744 KB (300 KB gzipped)

Top 5 Largest Modules:
1. node_modules/react-dom/cjs/react-dom.production.min.js - 120 KB
2. node_modules/@mui/material/esm/index.js - 87 KB
3. node_modules/recharts/es6/index.js - 65 KB
4. src/pages/Dashboard/index.js - 43 KB
5. node_modules/date-fns/esm/index.js - 38 KB

Optimization Opportunities:
• Replace moment.js with date-fns (saves 54 KB)
• Enable aggressive tree shaking (potential 120 KB reduction)
• Split vendor bundle into smaller chunks
• Consider dynamic imports for Dashboard (43 KB)

Performance Budget Status: ⚠️  WARNING
Initial bundle exceeds recommended 400 KB limit
```

### JSON Export

**Programmatic Analysis:**
```json
{
  "bundles": [
    {
      "name": "main",
      "size": 456000,
      "gzipSize": 189000,
      "modules": 342,
      "duplicates": 3
    }
  ],
  "recommendations": [
    {
      "type": "dependency-replacement",
      "module": "moment",
      "suggestion": "date-fns",
      "savings": 54000
    }
  ]
}
```

---

**ClaudeForge Bundle Analyzer** - Intelligent bundle size optimization with comprehensive analysis, actionable recommendations, and automated performance monitoring.