Was ist Vite?

Was ist Vite?

Vite ist ein Frontend-Build-Tool von Evan You, dem Schöpfer von Vue.js. In der Entwicklung liefert es Ihre Quelldateien über native ES-Module an den Browser, sodass der Dev-Server schnell startet und Änderungen per Hot Module Replacement erscheinen. Für die Produktion bündelt es Ihren Code mit Rolldown zu optimierten statischen Dateien, die jeder Webserver oder jedes CDN ausliefern kann.

Die aktuelle Hauptversion ist Vite 8, veröffentlicht am 12. März 2026. Ältere Anleitungen beschreiben Vite 7 und früher, die in der Entwicklung esbuild und für den Produktions-Build Rollup nutzten. Das ist wichtig, wenn Sie eine alte Anleitung oder die Readme eines Plugins lesen.

So funktioniert Vite

Entwicklung: native ES-Module

Vite liefert Quellcode bei Bedarf über natives ESM aus, der Browser lädt also nur, was die aktuelle Seite importiert. Der Start bleibt schnell, wenn das Projekt wächst, weil zuerst nichts gebündelt werden muss. Bibliotheken in node_modules werden einmal vorgebündelt, aus zwei Gründen laut Vite-Dokumentation: CommonJS- und UMD-Pakete müssen in ESM umgewandelt werden, und ein Paket mit vielen internen Modulen wird zu einer einzigen Anfrage statt hunderten. In Vite 8 übernimmt Rolldown dieses Vorbündeln.

Produktion: eine einheitliche Bundle-Pipeline

Ungebündeltes ESM ist in der Produktion weiterhin langsam, weil verschachtelte Importe zusätzliche Netzwerk-Roundtrips verursachen. Deshalb bündelt vite build, teilt den Code auf und versieht Dateinamen mit Hashes. Rolldown ist ein in Rust geschriebener Bundler des VoidZero-Teams, der esbuild und Rollup ersetzen soll, damit Entwicklung und Produktion dieselbe Pipeline nutzen. Die Vite-8-Ankündigung nennt bis zu 10-30-mal schnellere Builds und zitiert Anwender wie Linear, dessen Produktions-Build von 46 s auf 6 s sank. Das sind Herstellerangaben für deren eigene Projekte, messen Sie also Ihren eigenen Build.

Was ohne zusätzliche Einrichtung funktioniert

• TypeScript und JSX. Vite transpiliert .ts-Dateien mit dem Oxc-Transformer, prüft aber keine Typen. Führen Sie tsc --noEmit in der CI aus.
• CSS. Reines CSS, CSS-Module (jede Datei mit der Endung .module.css) und PostCSS.
• Glob-Importe. import.meta.glob importiert viele Module nach Muster, standardmäßig per Lazy Loading.
• Web Worker. Empfohlen ist die Form new Worker(new URL(...)).
• Umgebungsvariablen. Sie werden über import.meta.env aus .env-Dateien gelesen.
• Offizielle Vorlagen für Vanilla JavaScript, Vue, React, Preact, Lit, Svelte, Solid und Qwik, jeweils mit TypeScript-Variante.

Voraussetzungen: Vite 8 benötigt Node.js 20.19+ oder 22.12+. Die Produktionsausgabe zielt auf Browser, die zu einem für jede Hauptversion festgelegten Datum als Baseline Widely Available gelten (bei dieser etwa Mitte 2023). Ältere Browser benötigen @vitejs/plugin-legacy.

Beispiel: eine API-URL, die im Browser ankommt

Sie tragen VITE_API_URL=https://api.example.com in .env.production ein und lesen sie als import.meta.env.VITE_API_URL. Vite ersetzt sie beim Build durch den Wert selbst. Eine Variable ohne das Präfix VITE_, etwa DB_PASSWORD, bleibt aus dem Client-Code heraus und ist im Browser undefined. Die Kehrseite: Alles mit Präfix sehen alle Besucher, legen Sie deshalb nie ein Geheimnis in einer VITE_-Variable ab.

Häufige Fehler

• process.env verwenden. In Browser-Code nutzt Vite import.meta.env. Übernommener Code braucht angepasste Verweise.
• Geheimnisse in VITE_-Variablen. Sie landen im öffentlichen Bundle.
• Den Dev-Server als Vorschau der Produktion betrachten. Die Entwicklung liefert ungebündelte Module, die Produktion Bundles. Führen Sie vite build und vite preview aus, bevor Sie die Performance beurteilen.
• Erwarten, dass Typfehler den Build abbrechen. Das tun sie nicht, solange Sie keinen Typprüfungsschritt ergänzen.
• Die Bundle-Größe ignorieren. Ein schneller Build sagt nichts darüber, wie viel JavaScript der Besucher lädt. Teilen Sie Routen auf und laden Sie, was beim ersten Rendern nicht nötig ist, per Lazy Loading nach.
• Eine nicht unterstützte Node-Version. Sie scheitert bei Installation oder Start.

Vite und webpack

webpack bündelt in der Entwicklung die gesamte Anwendung, bevor es sie ausliefern kann. Vite liefert Module auf Anfrage und bündelt nur für die Produktion, weshalb große Projekte schneller starten. webpack hat das größere und ältere Plugin-Ökosystem, und manche webpack-spezifischen Funktionen haben kein direktes Vite-Gegenstück, prüfen Sie daher Ihre Plugins vor einer Migration. Vites Plugin-API baut auf der von Rollup auf, und Vite 8 hält über eine Kompatibilitätsschicht die Verträglichkeit mit bestehenden Plugins aufrecht.

Serverseitiges Rendering

Vite bringt eingebaute Unterstützung für serverseitiges Rendering mit, doch sein Leitfaden nennt die API grundlegend und für Bibliotheks- und Framework-Autoren gedacht. Die meisten Teams nutzen stattdessen ein Framework, das sie kapselt. Zu den Abwägungen einer clientseitig gerenderten App lesen Sie Single Page Applications.

Vite, Performance-Tests und Monitoring

Vite verkürzt Ihren Build und die Feedbackschleife. Es entscheidet nicht, wie schnell sich die fertige Seite anfühlt. Testen Sie den Produktions-Build: Das Page-Speed-Monitoring von LoadFocus führt geplante Lighthouse-Audits und Core-Web-Vitals-Prüfungen aus 25 Cloud-Regionen aus, sodass Sie sehen, ob eine Bundle-Änderung echten Seiten geholfen hat. Eine mit Vite gebaute Single Page App ruft außerdem APIs auf, und die brechen unter Last zuerst weg. Das API-Monitoring überwacht die Endpunkte, von denen Ihre App abhängt, und ein Lasttest zeigt, wie sich das Backend bei vielen gleichzeitigen Nutzern verhält. Zwei Leitfäden gehen tiefer: Lasttests für Single Page Applications und JavaScript-Performance. Die Konfiguration behandelt der offizielle Vite-Leitfaden.

Häufige Fragen: Vite

Ist Vite ein Bundler?

Es ist ein Build-Tool mit Dev-Server und Produktions-Build. Das eigentliche Bündeln übernimmt in Vite 8 Rolldown (in Vite 7 und früher Rollup).

Prüft Vite TypeScript-Typen?

Nein. Vite transpiliert TypeScript nur. Führen Sie tsc --noEmit oder den Typprüfungsbefehl Ihres Frameworks in der CI oder als separaten Entwicklungsprozess aus.

Welche Node.js-Version braucht Vite?

Vite 8 benötigt Node.js 20.19+ oder 22.12+. Manche Vorlagen verlangen eine neuere Version.

Funktioniert Vite mit React und Vue?

Ja. Die offiziellen Vorlagen decken React, Vue, Preact, Svelte, Solid, Lit und Qwik ab, und Vite bietet eine HMR-API, die Framework-Plugins für Aktualisierungen ohne vollständiges Neuladen nutzen.

Wie lese ich Umgebungsvariablen in Vite?

Über import.meta.env. Nur Variablen mit dem Präfix VITE_ erreichen den Client-Code, und nach Änderungen an .env-Dateien müssen Sie den Dev-Server neu starten.