Bundle-Analyse und Optimierung mit Claude Code

App-Optimierung durch Bundle-Analyse

Aufgeblähte JavaScript-Bundles wirken sich direkt auf die Seitenladegeschwindigkeit aus. Mit Claude Code können Sie von der Bundle-Analyse bis zur Implementierung von Optimierungsmaßnahmen effizient vorgehen.

Bundle-Größe visualisieren

> Analysiere die Bundle-Größe und identifiziere zu optimierende Abhängigkeiten.
> Füge auch eine Treemap-Visualisierung hinzu.

// vite.config.ts
import { defineConfig } from 'vite';
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    visualizer({
      filename: 'dist/bundle-stats.html',
      open: true,
      gzipSize: true,
      brotliSize: true,
      template: 'treemap',
    }),
  ],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          router: ['react-router-dom'],
          ui: ['@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu'],
        },
      },
    },
  },
});

Automatische Bundle-Größen-Prüfung

// scripts/check-bundle-size.ts
import { readFileSync, readdirSync, statSync } from 'fs';
import path from 'path';
import { gzipSync, brotliCompressSync } from 'zlib';

interface BundleReport {
  file: string;
  raw: number;
  gzip: number;
  brotli: number;
}

function analyzeBundles(dir: string): BundleReport[] {
  const files = readdirSync(dir, { recursive: true }) as string[];
  
  return files
    .filter(f => /\.(js|css)$/.test(f))
    .map(file => {
      const filePath = path.join(dir, file);
      const content = readFileSync(filePath);
      return {
        file,
        raw: content.length,
        gzip: gzipSync(content).length,
        brotli: brotliCompressSync(content).length,
      };
    })
    .sort((a, b) => b.gzip - a.gzip);
}

function formatSize(bytes: number): string {
  if (bytes < 1024) return `${bytes}B`;
  return `${(bytes / 1024).toFixed(1)}kB`;
}

const reports = analyzeBundles('dist/assets');
console.log('\nBundle-Größenbericht\n');
console.log('Datei | Raw | Gzip | Brotli');
console.log('--- | --- | --- | ---');

let totalGzip = 0;
for (const r of reports) {
  totalGzip += r.gzip;
  console.log(`${r.file} | ${formatSize(r.raw)} | ${formatSize(r.gzip)} | ${formatSize(r.brotli)}`);
}

console.log(`\nGesamt (gzip): ${formatSize(totalGzip)}`);

// Größenlimit-Prüfung
const LIMIT = 200 * 1024; // 200kB
if (totalGzip > LIMIT) {
  console.error(`\nBundle-Größe überschreitet das Limit (${formatSize(LIMIT)})!`);
  process.exit(1);
}

Schwere Abhängigkeiten identifizieren und ersetzen

> Schlage leichtere Alternativen für große Abhängigkeiten vor.

// Häufige Ersetzungsmuster
const replacements = {
  // moment.js (300kB) -> dayjs (2kB)
  'moment': 'dayjs',
  
  // lodash (70kB) -> lodash-es (Tree-Shaking-fähig)
  'lodash': 'lodash-es',
  
  // axios (13kB) -> fetch API (integriert)
  'axios': 'nativer fetch',

  // uuid (3.5kB) -> crypto.randomUUID() (integriert)
  'uuid': 'crypto.randomUUID()',
};

// Einzelimport von lodash
// Falsch: import _ from 'lodash';
// Richtig: import debounce from 'lodash-es/debounce';

Code-Splitting durch dynamische Imports

// Routenbasiertes Splitting
const routes = [
  {
    path: '/dashboard',
    component: lazy(() => import('./pages/Dashboard')),
  },
  {
    path: '/settings',
    component: lazy(() => import('./pages/Settings')),
  },
];

// Bedingter Import
async function loadEditor() {
  const { EditorModule } = await import('./modules/heavy-editor');
  return new EditorModule();
}

// Verzögertes Laden von Bibliotheken
async function highlightCode(code: string, lang: string) {
  const { highlight } = await import('prismjs');
  return highlight(code, lang);
}

Bundle-Größen-Überwachung in CI/CD

# .github/workflows/bundle-check.yml
name: Bundle Size Check
on: [pull_request]

jobs:
  bundle-size:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - run: npx tsx scripts/check-bundle-size.ts
      - uses: actions/upload-artifact@v4
        with:
          name: bundle-report
          path: dist/bundle-stats.html

Zusammenfassung

Bundle-Analyse und Optimierung sind eng mit Tree-Shaking verbunden. Mit Claude Code können Sie von der Abhängigkeitsanalyse bis zum Ersetzen durch leichtere Alternativen effizient vorgehen. Durch das Einbinden von Bundle-Größen-Checks in die CI/CD können Performance-Verschlechterungen frühzeitig verhindert werden. Zur Vite-Build-Optimierung siehe die offizielle Vite-Dokumentation.