mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-28 22:42:11 +01:00

Files

Lorenz Hilpert f678c0a5e7 docs(.claude): rename command files and expand command documentation

Rename colon-style command files to hyphenated names and replace terse docs
with comprehensive, expanded guides for .claude commands. Added detailed
step-by-step documentation, examples, validation checks and references for:

- dev-add-e2e-attrs (E2E attribute guidance)
- docs-library (library README generation)
- docs-refresh-reference (library reference regeneration)
- quality-bundle-analyze (bundle size analysis)
- quality-coverage (test coverage reporting)

Standardizes command filenames and greatly improves developer/QA guidance for
documentation and quality workflows.

2025-10-22 15:45:57 +02:00

3.1 KiB

Raw Blame History

/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

# Clean previous build
rm -rf dist/

# Build for production
npm run build-prod

2. Analyze Bundle Output

# 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

# 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:

# 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:

# 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)

3.1 KiB Raw Blame History