Vite

Was ist Vite?

Vite ist ein Build-Tool mit zwei Hauptaufgaben: ein Development-Server, der nahezu sofort einsatzbereit ist, und ein Production-Build, der optimierte Bundles erstellt. Es wurde 2020 von Evan You entwickelt und ist mittlerweile die Standard-Toolchain für die meisten modernen Front-end-Frameworks.

Der entscheidende Ansatz ist, dass die Entwicklung und die Produktion unterschiedliche Engpässe haben. In der Entwicklung wünscht man sich einen schnellen Start und schnelle Updates. Daher führt Vite überhaupt kein Bundling durch – es liefert den Quellcode über native ES-Module aus und transformiert Dateien bei Bedarf. In der Produktion hingegen ist das kleinste und schnellste Ergebnis gefragt, weshalb Vite Rollup zum Bundeln und Optimieren nutzt.

Der Development-Server

Das Ausführen von vite startet einen Dev-Server, der deinen Quellcode als native ES-Module bereitstellt. Der Browser fordert jedes Modul einzeln an, und Vite transformiert es on the fly.

# terminal
vite          # start the dev server
vite build    # production build
vite preview  # preview the production build locally

Da kein vollständiges Bundle erstellt werden muss, erfolgt der Start in Millisekunden und bleibt auch bei wachsendem Projekt konstant. Abhängigkeiten werden einmalig mit esbuild pre-bundled, da sie sich selten ändern; dies verhindert eine Flut von kleinen Anfragen. Hot Module Replacement aktualisiert anschließend nur die Module, die sich geändert haben, wobei der Anwendungsstatus nach Möglichkeit erhalten bleibt.

Der Production-Build

vite build führt die Rollup-Pipeline aus und schreibt das Ergebnis standardmäßig nach dist.

• Tree-shaking entfernt ungenutzte Exports.
• Code splitting erstellt Chunks für Routen und dynamische Imports.
• Minification verkleinert JavaScript, CSS und HTML.
• Asset hashing fügt Content-Hashes für langfristiges Caching hinzu.
• CSS handling extrahiert und minifiziert Stylesheets.

Das Ergebnis ist ein Set aus statischen Dateien, die du auf jedem Host, CDN oder jeder statischen Plattform deployen kannst.

Konfiguration

Vite liest eine vite.config.ts-Datei im Projektstammverzeichnis.

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { "@": "/src" },
  },
  server: {
    port: 5173,
    proxy: {
      "/api": "http://localhost:8787",
    },
  },
  build: {
    outDir: "dist",
    sourcemap: true,
  },
});

Die resolve.alias-Option erstellt Import-Shortcuts, und server.proxy leitet API-Anfragen während der Entwicklung an ein Backend weiter, wodurch CORS-Probleme vermieden werden. Die meisten Framework-Setups generieren diese Datei automatisch für Sie, sodass nur noch kleine Ergänzungen nötig sind.

Plugins

Plugins sind die Art und Weise, wie Vite Frameworks und Tooling unterstützt. Sie implementieren eine Rollup-kompatible Schnittstelle mit zusätzlichen Vite-spezifischen Hooks.

// plugins.ts
import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [vue()],
});

Gängige Plugins decken React, Vue, Svelte und Solid ab, sowie CSS-Tools wie Tailwind, Support für ältere Browser, PWA-Funktionen und Bundle-Analysen. Da die Schnittstelle Rollup-kompatibel ist, funktioniert ein Großteil des Rollup-Plugin-Ökosystems direkt.

Umgebungsvariablen

Vite lädt Variablen aus .env-Dateien und stellt dem Client-Code nur diejenigen zur Verfügung, die mit VITE_ beginnen.

# .env
VITE_API_URL=https://api.example.com
DB_PASSWORD=secret

// env.ts
const url = import.meta.env.VITE_API_URL;
const isDev = import.meta.env.DEV;

Das VITE_-Präfix ist ein Sicherheitsmechanismus: Alles ohne dieses Präfix bleibt aus dem Client-Bundle ausgeschlossen, sodass Geheimnisse nicht versehentlich durchsickern können. Variablen werden zur Build-Zeit ersetzt, nicht zur Laufzeit ausgelesen, und über import.meta.env aufgerufen.

Assets und CSS

Du importierst Assets direkt aus JavaScript, und Vite erledigt den Rest.

// assets.ts
import logo from "./logo.svg";
import "./styles.css";
import styles from "./Button.module.css";

Kleine Assets werden als Data-URLs inline eingebettet, größere werden mit gehashten Namen ausgegeben. CSS, das auf diese Weise importiert wird, wird gebündelt und im Development-Modus per Hot-Reload aktualisiert. Das public-Verzeichnis ist für Dateien gedacht, die einen exakten Pfad beibehalten müssen, wie zum Beispiel robots.txt oder ein per URL referenziertes Favicon.

Code Splitting

Dynamische import() erstellen separate Chunks, die bei Bedarf geladen werden. Dies ist der wichtigste Hebel, um das initiale Bundle klein zu halten.

// lazy.ts
const { Chart } = await import("./Chart");

Wende dies auf Routen, Modals, Editoren und jede Funktion an, die beim ersten Paint noch nicht benötigt wird. Frameworks, die auf Vite basieren, übernehmen das Route-Level-Splitting oft automatisch für dich, aber das Verständnis dieses Primitivs hilft, wenn du eine feinere Kontrolle benötigst.

Über die App hinaus

Vite ist nicht nur für Single-Page Apps gedacht. Der Library mode erstellt ein distributables Paket mit den passenden Formaten und externalisierten Dependencies. Vite unterstützt zudem Server-Side Rendering und bildet die Engine hinter Vitest, Astro, Nuxt und SvelteKit. Dank dieses gemeinsamen Fundaments funktionieren dieselben Konfigurationen, Aliases und Plugins konsistent über Entwicklung, Testing und Build-Prozess hinweg.

Best Practices

• Halten Sie die Konfiguration minimal und überlassen Sie die Details den Framework-Plugins.
• Nutzen Sie resolve.alias für saubere Imports anstelle von langen relativen Pfaden.
• Proxien Sie die API in der Entwicklung, anstatt einen Host hart zu codieren.
• Präfixieren Sie Client-Umgebungsvariablen mit VITE_ und lassen Sie Secrets ohne Präfix.
• Teilen Sie umfangreiche Features mithilfe von dynamischen Imports auf.
• Importieren Sie Assets direkt aus JavaScript, damit diese gehasht und optimiert werden.
• Aktivieren Sie Source Maps für die Produktion, wenn Sie einen Error-Tracker verwenden.

Häufige Fehler

• Erwartung von process.env im Client-Code anstelle von import.meta.env.
• Offenlegung von Secrets durch das Präfix VITE_.
• Platzieren von Dateien in public, die eigentlich importiert und gehasht werden sollten.
• Auslieferung eines einzigen riesigen Bundles, weil keine dynamischen Imports verwendet werden.
• Hinzufügen von Plugins, die Funktionen doppelt implementieren, die bereits von einem Framework-Plugin bereitgestellt werden.
• Kampf gegen die Konfiguration, anstatt ein Framework-Preset zu nutzen.

Wie geht es weiter?

Vite ist das Fundament der modernen Toolchain. Vergleiche es für ältere Projekte mit Webpack, führe Tests mit Vitest aus und sieh dir an, wie es Frameworks in den Guides für React, Astro und SvelteKit antreibt. Öffne anschließend die vite.config.ts eines Projekts und nimm eine gezielte Änderung vor, um den Effekt zu sehen.