# /quality:bundle-analyze - Analyze Bundle Sizes

Analyze production bundle sizes and provide optimization recommendations. Project thresholds: 2MB warning, 5MB error.

## Tasks

### 1. Run Production Build
```bash
# Clean previous build
rm -rf dist/

# Build for production
npm run build-prod
```

### 2. Analyze Bundle Output
```bash
# List bundle files with sizes
ls -lh dist/apps/isa-app/browser/*.js | awk '{print $9, $5}'

# Get total bundle size
du -sh dist/apps/isa-app/browser/
```

### 3. Identify Large Files
Parse build output and identify:
- Main bundle size
- Lazy-loaded chunk sizes
- Vendor chunks
- Files exceeding thresholds:
  - **Warning**: > 2MB
  - **Error**: > 5MB

### 4. Analyze Dependencies
```bash
# Check for duplicate dependencies
npm ls --depth=0 | grep -E "UNMET|deduped"

# Show largest node_modules packages
du -sh node_modules/* | sort -rh | head -20
```

### 5. Source Map Analysis
Use source maps to identify large contributors:
```bash
# Install source-map-explorer if needed
npm install -g source-map-explorer

# Analyze main bundle
source-map-explorer dist/apps/isa-app/browser/main.*.js
```

### 6. Generate Recommendations
Based on analysis, provide actionable recommendations:

**If bundle > 2MB:**
- Identify heavy dependencies to replace or remove
- Suggest lazy loading opportunities
- Check for unused imports

**Code Splitting Opportunities:**
- Large feature modules that could be lazy-loaded
- Heavy libraries that could be dynamically imported
- Vendor code that could be split into separate chunks

**Dependency Optimization:**
- Replace large libraries with smaller alternatives
- Remove unused dependencies
- Use tree-shakeable imports

**Build Configuration:**
- Enable/optimize compression
- Check for source maps in production (should be disabled)
- Verify optimization flags

### 7. Comparative Analysis
If previous build data exists:
```bash
# Compare with previous build
# (Requires manual tracking or CI/CD integration)
echo "Current build: $(du -sh dist/apps/isa-app/browser/ | awk '{print $1}')"
```

### 8. Generate Report
Create formatted report with:
- Total bundle size with threshold status (✅ < 2MB, ⚠️ 2-5MB, ❌ > 5MB)
- Main bundle and largest chunks
- Top 10 largest dependencies
- Optimization recommendations prioritized by impact
- Lazy loading opportunities

## Output Format
```
Bundle Analysis Report
======================

Total Size: X.XX MB [STATUS]
Main Bundle: X.XX MB
Largest Chunks:
  - chunk-name.js: X.XX MB
  - ...

Largest Dependencies:
  1. dependency-name: X.XX MB
  ...

Recommendations:
🔴 Critical (> 5MB):
  - [Action items]

⚠️ Warning (2-5MB):
  - [Action items]

✅ Optimization Opportunities:
  - [Action items]

Lazy Loading Candidates:
  - [Feature modules]
```

## Error Handling
- Build failures: Show error and suggest fixes
- Missing tools: Offer to install (source-map-explorer)
- No dist folder: Run build first

## References
- CLAUDE.md Build Configuration section
- Angular build optimization: https://angular.dev/tools/cli/build
- package.json (build-prod script)
