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

Files

Lorenz Hilpert bcb412e48d chore: add Claude Code infrastructure and documentation system

Add comprehensive Claude Code tooling:
- Agents: docs-researcher, docs-researcher-advanced for documentation research
- Commands: dev:add-e2e-attrs, docs:library, docs:refresh-reference, quality:bundle-analyze, quality:coverage
- Skills: 8 specialized skills including api-change-analyzer, architecture-enforcer, library-scaffolder, and more

Update documentation:
- Comprehensive CLAUDE.md overhaul with library reference system
- Update testing guidelines in docs/guidelines/testing.md
- Update READMEs for checkout, icons, scanner, and scroll-position libraries

Remove outdated checkout-completion-flow-documentation.md

Update .gitignore for Claude Code files

2025-10-22 15:02:53 +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