Build & Tooling 5. Mai 2026 9 min Lesezeit

Vite mit Claude Code: Blitzschnelle Build-Tools für moderne Web-Apps 2026

Vite hat Webpack und Create React App in vielen Projekten abgelöst — und das aus gutem Grund. Native ES Modules im Dev-Server, Hot Module Replacement in unter 50 ms und ein Plugin-Ökosystem, das keine Wünsche offen lässt. Kombiniert mit Claude Code als Build-Experten konfigurierst du selbst komplexe Monorepos in Minuten statt Stunden.

Warum Vite schneller ist als Webpack und CRA

Der entscheidende Unterschied liegt im Entwicklungsserver-Ansatz. Webpack bündelt beim Start die gesamte Applikation — bei großen Projekten dauert das 30–90 Sekunden. Vite hingegen nutzt native ES Modules direkt im Browser: Der Dev-Server startet sofort, und nur die tatsächlich angeforderten Module werden transformiert.

Kriterium	Webpack / CRA	Vite 6.x
Kaltstart Dev-Server	30–90 s	< 500 ms
HMR-Update	2–10 s	< 50 ms
Prod-Build (Rollup)	60–180 s	8–25 s
Konfigurationskomplexität	Hoch (Loader-Chaos)	Gering (Plugin-API)
TypeScript-Support	Babel/ts-loader nötig	Out of the box (esbuild)

Vite nutzt esbuild für die Transpilation (10–100× schneller als Babel) und Rollup für den Produktions-Build mit optimiertem Tree-Shaking. Das Beste aus beiden Welten — Geschwindigkeit im Dev und maximale Bundle-Qualität im Prod.

Claude Code Prompt "Erstelle ein neues React + TypeScript Projekt mit Vite. Füge absolute Imports via tsconfig path aliases hinzu, konfiguriere einen Dev-Proxy zu http://localhost:3001 für /api/** und aktiviere Source Maps im Production Build."

vite.config.ts: Die zentrale Konfigurationsdatei

Alles in Vite läuft über eine einzige, typisierte Konfigurationsdatei. Kein Babel-Config-Chaos, keine verschachtelten Loader-Regeln — stattdessen eine klare TypeScript-API.

Vollständige Produktions-Konfiguration

// vite.config.ts
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import svgr from 'vite-plugin-svgr'
import { VitePWA } from 'vite-plugin-pwa'
import path from 'path'

export default defineConfig(({ command, mode }) => {
  // Env-Variablen mit Prefix laden
  const env = loadEnv(mode, process.cwd(), '')

  return {
    plugins: [
      react(),
      svgr({ svgrOptions: { icon: true } }),
      VitePWA({
        registerType: 'autoUpdate',
        manifest: {
          name: 'My App',
          short_name: 'App',
          theme_color: '#646cff',
        },
      }),
    ],

    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
        '@components': path.resolve(__dirname, './src/components'),
        '@hooks': path.resolve(__dirname, './src/hooks'),
        '@utils': path.resolve(__dirname, './src/utils'),
        '@types': path.resolve(__dirname, './src/types'),
      },
    },

    server: {
      port: 5173,
      proxy: {
        '/api': {
          target: env.VITE_API_BASE_URL || 'http://localhost:3001',
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/api/, ''),
        },
        '/ws': {
          target: 'ws://localhost:3001',
          ws: true,
        },
      },
    },

    build: {
      outDir: 'dist',
      sourcemap: command === 'build' ? 'hidden' : true,
      minify: 'esbuild',
      target: 'es2022',
      rollupOptions: {
        output: {
          manualChunks: {
            'react-vendor': ['react', 'react-dom'],
            'router': ['react-router-dom'],
            'ui': ['@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu'],
          },
        },
      },
      chunkSizeWarningLimit: 500,
    },
  }
})

Key Konfigurationsoptionen

resolve.alias server.proxy build.sourcemap manualChunks loadEnv() defineConfig() build.target VitePWA

Path Aliases in tsconfig.json synchronisieren

Vite-Aliases müssen auch in der TypeScript-Konfiguration gespiegelt werden — sonst kennt der TS-Compiler die Shortcuts nicht.

// tsconfig.json — paths müssen mit vite.config.ts aliases übereinstimmen
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"],
      "@hooks/*": ["./src/hooks/*"],
      "@utils/*": ["./src/utils/*"],
      "@types/*": ["./src/types/*"]
    }
  }
}

Claude Code Prompt "Meine Vite-Aliases sind in vite.config.ts definiert, aber TypeScript kennt sie nicht. Synchronisiere die paths in tsconfig.json mit den Aliases aus vite.config.ts und stelle sicher, dass beide konsistent sind."

Plugin-Ökosystem: Die wichtigsten Vite-Plugins 2026

@vitejs/plugin-react — Offizielles React-Plugin

Das offizielle React-Plugin bringt Fast Refresh (HMR ohne State-Verlust), JSX-Transform und optionale Babel-Plugins für spezielle Transforms.

// Erweiterte React-Plugin-Konfiguration
react({
  // Babel-Plugins für spezielle Transforms
  babel: {
    plugins: [
      'babel-plugin-styled-components',
      ['@babel/plugin-proposal-decorators', { legacy: true }],
    ],
  },
  // JSX in .tsx UND .ts Dateien (für Storybook-Kompatibilität)
  include: [/\.(tsx|ts|jsx|js)$/],
})

vite-plugin-pwa — Progressive Web App in Minuten

Service Worker, Manifest, Caching-Strategien — das PWA-Plugin automatisiert alles. Besonders nützlich für Offline-fähige Apps und Mobile-Web-Erfahrungen.

VitePWA({
  registerType: 'autoUpdate',
  workbox: {
    globPatterns: ['**/*.{js,css,html,ico,png,svg,woff2}'],
    runtimeCaching: [{
      urlPattern: /^https:\/\/api\./,
      handler: 'NetworkFirst',
      options: {
        cacheName: 'api-cache',
        expiration: { maxEntries: 50, maxAgeSeconds: 300 },
      },
    }],
  },
  manifest: {
    name: 'Agentic App',
    short_name: 'AgenticApp',
    description: 'KI-gestützte Web-App',
    theme_color: '#646cff',
    background_color: '#0d1117',
    display: 'standalone',
    icons: [
      { src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' },
      { src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png' },
    ],
  },
})

vite-plugin-svgr — SVGs als React-Komponenten

Mit SVGR importierst du SVG-Dateien direkt als typisierte React-Komponenten — mit voller Prop-Unterstützung für Farbe, Größe und Accessibility-Attribute.

// Import-Syntax mit vite-plugin-svgr
import { ReactComponent as Logo } from './logo.svg'
import { ReactComponent as ArrowIcon } from '@/assets/icons/arrow.svg'

// Verwendung als echte React-Komponente
function Header() {
  return (
    <div>
      <Logo width={120} aria-label="Firmenlogo" />
      <ArrowIcon className="icon-sm" fill="currentColor" />
    </div>
  )
}

Library-Mode: npm-Packages mit Vite bauen

Vite ist nicht nur für Applikationen — im Library-Mode baust du npm-Packages mit automatischem CJS- und ESM-Output, TypeScript-Declarations und optimalem Tree-Shaking.

// vite.config.ts — Library-Mode für npm-Package
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import dts from 'vite-plugin-dts'
import path from 'path'

export default defineConfig({
  plugins: [
    react(),
    dts({ include: ['src'], outDir: 'dist/types' }),
  ],
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'),
      name: 'MyComponentLib',
      formats: ['es', 'cjs'],
      fileName: (format) => `index.${format}.js`,
    },
    rollupOptions: {
      // React und ReactDOM NICHT ins Bundle (Peer Dependencies)
      external: ['react', 'react-dom', 'react/jsx-runtime'],
      output: {
        globals: {
          'react': 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
    minify: false, // Library-Consumer übernimmt Minify
  },
})

// package.json — korrekte Exports für Dual CJS/ESM
{
  "name": "@myorg/ui-lib",
  "version": "1.0.0",
  "main": "./dist/index.cjs.js",
  "module": "./dist/index.es.js",
  "types": "./dist/types/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.es.js",
      "require": "./dist/index.cjs.js",
      "types": "./dist/types/index.d.ts"
    }
  },
  "peerDependencies": {
    "react": ">=18.0.0",
    "react-dom": ">=18.0.0"
  },
  "files": ["dist"]
}

Claude Code Prompt "Konvertiere meine bestehende React-Komponentensammlung in ein npm-Package mit Vite Library-Mode. Generiere TypeScript-Declarations mit vite-plugin-dts, exportiere alle Komponenten über src/index.ts und konfiguriere package.json mit korrekten exports für ESM und CJS."

Umgebungsvariablen und .env-Handling

Vite hat ein eigenes, sicheres System für Umgebungsvariablen. Nur Variablen mit VITE_-Prefix werden ins Bundle eingebettet — alles andere bleibt serverseitig.

# .env (Basis — wird IMMER geladen)
VITE_APP_NAME=MyApp
VITE_API_BASE_URL=https://api.example.com

# .env.development (nur im Dev-Server aktiv)
VITE_API_BASE_URL=http://localhost:3001
VITE_DEBUG_MODE=true

# .env.production (nur beim Build aktiv)
VITE_API_BASE_URL=https://api.production.com
VITE_SENTRY_DSN=https://xxx@sentry.io/123

# .env.local (lokal, NIEMALS committen — in .gitignore!)
VITE_DEV_TOKEN=my-secret-dev-token

// TypeScript-Typen für import.meta.env
// vite-env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_APP_NAME: string
  readonly VITE_API_BASE_URL: string
  readonly VITE_DEBUG_MODE?: string
  readonly VITE_SENTRY_DSN?: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

// Verwendung im Code
const apiUrl = import.meta.env.VITE_API_BASE_URL
const isDebug = import.meta.env.VITE_DEBUG_MODE === 'true'
const isDev = import.meta.env.DEV // Vite built-in
const isProd = import.meta.env.PROD // Vite built-in

Sicherheitshinweis Nur VITE_-Variablen sind im Browser sichtbar. Niemals API-Secrets, Datenbank-Passwörter oder Private Keys mit VITE_ Prefix verwenden — diese landen im JavaScript-Bundle und sind für jeden sichtbar.

Serverseitige Variablen in vite.config.ts lesen

// Alle Env-Variablen (auch ohne VITE_ Prefix) in vite.config.ts verfügbar
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')

  return {
    define: {
      // Zur Build-Zeit ersetzte Konstanten (wie #define in C)
      '__APP_VERSION__': JSON.stringify(env.npm_package_version),
      '__BUILD_TIME__': JSON.stringify(new Date().toISOString()),
    },
    server: {
      proxy: {
        '/api': env.BACKEND_URL, // Kein VITE_ Prefix nötig in config
      },
    },
  }
})

Claude Code Prompts für Vite-Konfiguration

Prompt-Bibliothek: Vite mit Claude Code

Diese Prompts funktionieren direkt in Claude Code — einfach in den Chat eingeben:

Setup & Migration

"Migriere mein Create React App Projekt zu Vite. Behalte alle bestehenden Imports, passe package.json Scripts an und konfiguriere vite.config.ts mit den gleichen Aliases wie bisher."

Performance-Optimierung

"Analysiere mein Vite-Bundle und konfiguriere manualChunks in rollupOptions, um Initial-Load-Chunks unter 200 KB zu halten. Separiere react-vendor, router und UI-Library."

Monorepo-Setup

"Richte ein pnpm Workspace Monorepo mit Vite ein. Packages-Ordner für shared libs, Apps-Ordner für Vite-Apps. Konfiguriere workspace:* Abhängigkeiten und Hot-Reload über Package-Grenzen."

Testing-Integration

"Integriere Vitest in mein Vite-Projekt als Unit-Test-Framework. Konfiguriere jsdom als Environment, Code-Coverage mit v8 und füge Testing-Library für React hinzu."

Vitest: Das native Test-Framework für Vite

// vite.config.ts — Vitest-Integration
import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    environment: 'jsdom',
    globals: true,
    setupFiles: ['./src/test/setup.ts'],
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json', 'html'],
      exclude: ['node_modules', 'dist', '**/*.d.ts'],
      thresholds: { lines: 80, functions: 80 },
    },
    include: ['src/**/*.{test,spec}.{ts,tsx}'],
  },
})

Fazit: Vite + Claude Code = modernes Build-Setup in Minuten

Vite hat die Art, wie wir Frontend-Projekte aufsetzen, grundlegend verändert. Native ES Modules, esbuild-basierte Transpilation und ein klares Plugin-System machen Build-Konfiguration beherrschbar — statt zur Dauerbaustelle zu werden.

Mit Claude Code als Vite-Experten reduzierst du Konfigurationsaufwand weiter: Aliases, Proxy-Setups, Library-Mode, PWA-Integration — alles entsteht durch präzise Prompts statt stundenlanger Dokumentations-Recherche. Das Ergebnis: mehr Zeit für Features, weniger für Tooling-Friction.

Dev-Server startet in unter 500 ms statt 60 Sekunden
HMR-Updates unter 50 ms erhalten den Flow-State
Library-Mode macht npm-Package-Publishing trivial
Vitest integriert sich nahtlos ohne separate Jest-Konfiguration
Claude Code generiert typsichere Konfigurationen on-demand

Dein nächstes Vite-Projekt mit KI-Unterstützung

Starte noch heute mit Claude Code und konfiguriere dein Vite-Setup in Minuten statt Stunden. 14 Tage kostenlos — keine Kreditkarte erforderlich.

14 Tage kostenlos testen