ToolStabil

Bundle Analyzer

Analysiert Bundle-Größe, Tree-Shaking-Potenzial und identifiziert Code-Splitting-Möglichkeiten.

Grundlegende Befehle

# Bundle analysieren
velin-bundle analyze

# Detaillierter Report
velin-bundle analyze --detailed

# JSON-Output
velin-bundle analyze --format json > bundle-report.json

Analyse-Features

Size Breakdown

Größe pro Modul und Dependency

Tree-Shaking

Nicht genutzter Code in Dependencies

Code Splitting

Vorschläge für Lazy Loading

Duplikate

Mehrfach gebundelte Dependencies

Beispiel-Output

Bundle Analysis Report
======================

Total Size: 245.3 KB (gzipped: 78.2 KB)

Top 5 Modules:
  1. src/components/    82.1 KB (33.5%)
  2. node_modules/      71.4 KB (29.1%)
  3. src/lib/           45.2 KB (18.4%)
  4. src/utils/         28.6 KB (11.7%)
  5. src/hooks/         18.0 KB (7.3%)

Tree-Shaking Opportunities:
  ⚠ lodash: 42 KB → 8 KB (use lodash-es)
  ⚠ moment: 67 KB → 12 KB (use dayjs)

Code Splitting Suggestions:
  → src/components/Charts could be lazy loaded
  → src/lib/pdf-generator is only used on /reports

Visualisierung

# Interaktive Treemap öffnen
velin-bundle analyze --visualize

# HTML-Report generieren
velin-bundle analyze --format html --output bundle-report.html

# Sunburst-Diagramm
velin-bundle analyze --chart sunburst

Konfiguration

velin.tomltoml

[tools.bundle-analyzer]
# Größen-Limits (warnt wenn überschritten)
size_limit = "500KB"
gzip_limit = "150KB"

# Ignorierte Module
ignore = ["*.test.velin", "*.spec.velin"]

# Detailtiefe
detail_level = "module" # oder "file", "function"

# Baseline für Vergleich
baseline = ".bundle-baseline.json"

CI Integration

.github/workflows/bundle.ymlyaml

- name: Analyze Bundle
  run: |
    velin-bundle analyze --format json > bundle.json
    
- name: Check Size Limit
  run: |
    velin-bundle check --limit 500KB

Dependency Graph Runtime Inspector