Frontend Academy · Lektion

Vite: Dev-Server und Build

Starten Sie ein Vite-Projekt, verwenden Sie den sofortigen HMR-Dev-Server, führen Sie den Build-Befehl aus und sehen Sie sich die Produktionsausgabe in der Vorschau an.

Lektion 3 von 413 Schritte

Vite: Dev-Server und Build ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist Vite?

Vite ist ein Frontend-Build-Tool der nächsten Generation, das von Evan You (dem Ersteller von Vue) entwickelt wurde. Es bietet einen extrem schnellen Entwicklungsserver mit nativem ESM und esbuild sowie einen von Rollup unterstützten Produktions-Build.

Ein Vite-Projekt erstellen

npm create vite@latest legt ein neues Projektgerüst an. Wählen Sie Ihr Framework (Vanilla, React, Vue, Svelte, Preact, Lit) und die Variante (JS oder TS). Das Projekt ist sofort einsatzbereit — ganz ohne Konfiguration.

npm create vite@latest my-app
# Choose: React + TypeScript

cd my-app
npm install
npm run dev  # dev server on localhost:5173

Der Entwicklungsserver — sofortiger Start

Vite bündelt im Entwicklungsmodus nicht. Stattdessen stellt es jede Datei als natives ESM-Modul bereit. Der Browser importiert sie direkt. Kein Bündeln bedeutet einen Kaltstart von unter 100 ms, unabhängig von der Projektgröße. Beim HMR werden nur geänderte Dateien neu kompiliert.

HMR — Hot Module Replacement

Das HMR von Vite ersetzt in der laufenden App nur das geänderte Modul, ohne die gesamte Seite neu zu laden. Bei React mit @vitejs/plugin-react bleibt der Zustand der Komponente während des HMR erhalten. Änderungen werden in weniger als 50 ms sichtbar.

Die vite.config.js / vite.config.ts

Vite wird mit einer vite.config.ts-Datei konfiguriert. Häufige Optionen sind Plugins, Resolve-Aliase, der Server-Port, ein Proxy für API-Aufrufe und das Ausgabeverzeichnis des Builds.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { '@': '/src' },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },
});

Umgebungsvariablen

Vite stellt Umgebungsvariablen mit dem Präfix VITE_ über import.meta.env bereit. Speichern Sie sie in .env, .env.development und .env.production. Präfixieren Sie Geheimnisse niemals mit VITE_ — sie werden in das Browser-Bundle aufgenommen.

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

# In code:
const apiUrl = import.meta.env.VITE_API_URL;

npm run build — Produktions-Build

npm run build ruft intern Rollup auf, um die App zu bündeln, zu minimieren und per Tree-Shaking zu optimieren. Die Ausgabe landet im Verzeichnis dist/ und ist bereit für die Bereitstellung.

npm run build
# Output:
# dist/
#   index.html
#   assets/
#     index-a1b2c3.js  (minified app bundle)
#     vendor-d4e5f6.js  (node_modules chunk)
#     index-7h8i9j.css

Das Bundle analysieren

Verwenden Sie vite-bundle-visualizer oder rollup-plugin-visualizer, um eine Treemap der Bundle-Inhalte zu erzeugen. So lassen sich übergroße Abhängigkeiten und Möglichkeiten für Lazy Loading erkennen.

npm run preview

npm run preview stellt den Produktions-Build aus dist/ lokal bereit. Verwenden Sie den Befehl, um den Produktions-Build vor der Bereitstellung zu überprüfen — so werden Probleme erkannt, die nur auftreten, wenn die App nicht im Entwicklungsmodus läuft.

Code-Splitting in Vite

Dynamische import()-Anweisungen erzeugen automatisch separate Chunks. Lazy-Routen von React Router und auch Vue's defineAsyncComponent lösen ebenfalls Code-Splitting aus. Überprüfen Sie die Chunk-Größen in der Build-Ausgabe.

Vite für Bibliotheken

Der Bibliotheksmodus von Vite (build.lib) erstellt npm-Bibliotheken und gibt sie sowohl im ESM- als auch im CJS-Format aus. Geben Sie eine External-Liste an, damit Peer-Abhängigkeiten wie React nicht gebündelt werden.

Kurztest

Warum ist der Entwicklungsserver von Vite schneller als der von webpack?

Beantworte es in der interaktiven Lektion

Zusammenfassung: Vite

npm create vite@latest erstellt sofort ein Projektgerüst. Der Entwicklungsserver verwendet natives ESM — kein Bündeln, sofortiges HMR. vite.config.ts ist für Plugins, Aliase und Proxies zuständig. Das Präfix VITE_ kennzeichnet browsergeeignete Umgebungsvariablen. npm run build erzeugt ein optimiertes Rollup-Bundle. npm run preview testet den Produktions-Build lokal.

Kostenlos starten

Lerne HTML mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 41
Lektionen: 163

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Vite: Dev-Server und Build“ kostenlos?

Ja — der vollständige Text von „Vite: Dev-Server und Build“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Vite: Dev-Server und Build“?

Starten Sie ein Vite-Projekt, verwenden Sie den sofortigen HMR-Dev-Server, führen Sie den Build-Befehl aus und sehen Sie sich die Produktionsausgabe in der Vorschau an. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Vite: Dev-Server und Build“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

ES-Module: import, export und dynamischer Import
npm und package.json: Abhängigkeiten und Scripts
Vite: Dev-Server und Build
Bundling-Konzepte: Tree Shaking und Code Splitting

← Zurück zu Frontend Academy