Build-Tooling & Vite 5. Mai 2026 10 min Lesezeit

Vite Plugins mit Claude Code: Build-Optimierung 2026

Vite ist der schnellste Build-Bundler — aber seine wahre Stärke liegt im Plugin-Ökosystem. Claude Code kennt die Plugin-API in- und auswendig: eigene Plugins schreiben, Virtual Modules, Code-Transformation, Build-Analyse und optimierte Production-Builds.

Essential Vite Plugins für jedes Projekt

PluginsDas Standard-Plugin-Set

# Prompt: "Konfiguriere Vite optimal für ein React TypeScript SaaS-Projekt"

npm install -D \
  @vitejs/plugin-react              # React Fast Refresh
  vite-plugin-checker               # TypeScript-Fehler im Terminal
  vite-tsconfig-paths               # TypeScript Path Aliases (@/)
  vite-plugin-pwa                   # Progressive Web App
  rollup-plugin-visualizer          # Bundle-Analyse
  vite-plugin-compression           # Brotli/Gzip Pre-Compression

// vite.config.ts — Optimale Produktions-Konfiguration
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import checker from 'vite-plugin-checker';
import tsconfigPaths from 'vite-tsconfig-paths';
import { visualizer } from 'rollup-plugin-visualizer';
import compression from 'vite-plugin-compression';

export default defineConfig(({ mode }) => ({
  plugins: [
    react(),
    tsconfigPaths(),
    checker({ typescript: true }),
    compression({ algorithm: 'brotliCompress' }),
    mode === 'analyze' && visualizer({
      open: true,
      filename: 'dist/stats.html',
      gzipSize: true,
    }),
  ],
  build: {
    rollupOptions: {
      output: {
        // Manuelles Code-Splitting für besseres Caching:
        manualChunks: {
          vendor: ['react', 'react-dom'],
          router: ['react-router-dom'],
          query: ['@tanstack/react-query'],
          ui: ['@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu'],
        },
      },
    },
    chunkSizeWarningLimit: 1000,
    sourcemap: mode !== 'production',
  },
  server: {
    proxy: {
      '/api': { target: 'http://localhost:3001', changeOrigin: true },
    },
  },
}));

Eigenes Vite Plugin schreiben

Custom PluginPlugin-API: Hooks und Lifecycle

// Prompt: "Schreibe ein Vite Plugin das Build-Infos ins Bundle injiziert"
import type { Plugin } from 'vite';

// Plugin-Struktur:
function buildInfoPlugin(): Plugin {
  return {
    name: 'build-info',  // Plugin-Name (für Fehler-Meldungen)

    // config: Konfiguration modifizieren:
    config(config, { mode }) {
      config.define = {
        ...config.define,
        __BUILD_MODE__: JSON.stringify(mode),
      };
    },

    // configResolved: Finale Konfiguration lesen:
    configResolved(config) {
      console.log(`Build für: ${config.mode}`);
    },

    // buildStart: Wird einmal zu Beginn aufgerufen:
    async buildStart() {
      const buildInfo = {
        timestamp: new Date().toISOString(),
        version: process.env.npm_package_version,
        commit: await getGitCommit(),
      };
      // In Virtual Module für Import bereitstellen:
      this.emitFile({
        type: 'asset',
        fileName: 'build-info.json',
        source: JSON.stringify(buildInfo, null, 2),
      });
    },

    // transform: Code-Transformation pro Datei:
    transform(code, id) {
      if (!id.endsWith('.ts') && !id.endsWith('.tsx')) return;
      // Code modifizieren (z.B. debug-Statements entfernen):
      if (process.env.NODE_ENV === 'production') {
        code = code.replace(/console\.debug\([^)]*\);?/g, '');
      }
      return { code };
    },

    // generateBundle: Zugriff auf alle generierten Chunks:
    generateBundle(_, bundle) {
      const totalSize = Object.values(bundle)
        .filter(chunk => chunk.type === 'chunk')
        .reduce((sum, chunk) => sum + (chunk as any).code.length, 0);
      console.log(`Total bundle size: ${(totalSize / 1024).toFixed(2)}kb`);
    },
  };
}

Virtual Modules

VirtualSynthetische Module zur Laufzeit

// Prompt: "Virtual Module für dynamisch generierte Route-Liste"

import { glob } from 'glob';

const VIRTUAL_ID = 'virtual:routes';
const RESOLVED_ID = '\0virtual:routes';  // \0 = Vite-Konvention

function routesPlugin(): Plugin {
  return {
    name: 'virtual-routes',

    resolveId(id) {
      if (id === VIRTUAL_ID) return RESOLVED_ID;
    },

    async load(id) {
      if (id !== RESOLVED_ID) return;

      // Pages-Verzeichnis scannen und Route-Objekte generieren:
      const pages = await glob('src/pages/**/*.tsx');
      const routes = pages.map(page => {
        const path = page
          .replace('src/pages', '')
          .replace('.tsx', '')
          .replace('/index', '/');
        return { path, component: page };
      });

      // Generierter Code als String:
      return `
        import { lazy } from 'react';
        export const routes = [
          ${routes.map(r => `{
            path: "${r.path}",
            component: lazy(() => import("/${r.component}"))
          }`).join(',')}
        ];
      `;
    },
  };
}

// Nutzung in der App:
import { routes } from 'virtual:routes';
// TypeScript-Typen für Virtual Modules (vite-env.d.ts):
// declare module 'virtual:routes' { export const routes: Route[]; }

Virtual Module Use Cases: Auto-generierte Route-Listen, Icon-Sprites aus SVG-Ordner, i18n-Strings aus JSON-Dateien, Environment-Variablen zur Compile-Zeit. Claude Code schreibt solche Plugins auf Prompt — inklusive TypeScript-Deklarationen.

Bundle-Analyse und Optimierung

# Prompt: "Analysiere unseren Production-Build und identifiziere große Dependencies"

# Bundle analysieren:
npx vite build --mode analyze
# → Öffnet interaktives Treemap in Browser

# Häufige Probleme die Claude Code findet:
# 1. moment.js (230kb) → date-fns tree-shaken (2-10kb)
# 2. lodash (70kb) → lodash-es tree-shaken ODER native JS
# 3. Icons: lucide-react ALLE importiert statt einzeln
#    SCHLECHT: import * as Icons from 'lucide-react'
#    GUT:      import { Search, User } from 'lucide-react'

# Dynamic Import für große Komponenten:
const RichEditor = lazy(() => import('./RichEditor'));
const PDFViewer = lazy(() => import('./PDFViewer'));

# Preload für kritische Chunks:
// vite.config.ts:
modulePreload: {
  polyfill: true,
  resolveDependencies: (url, deps) => deps.filter(d => d.includes('vendor')),
}

Build-Tooling-Modul im Kurs

Im Claude Code Mastery Kurs: vollständiges Vite-Modul mit Plugin-Entwicklung, Virtual Modules, Code-Transformation, Bundle-Analyse und Production-Optimierung — inkl. eigenes Starter-Plugin-Template.

14 Tage kostenlos testen →