Vite: Plugin-System und SSR-Modus
Schreiben Sie ein Vite-Plugin mit transform- und load-Hooks, integrieren Sie Plugins von Drittanbietern und konfigurieren Sie Vite mit der Option ssrBuild für serverseitiges Rendering.
Vite: Plugin-System und SSR-Modus ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.
Warum sich Vite durchgesetzt hat
Vite (französisch für „schnell“) wurde von Evan You entwickelt. Im Entwicklungsmodus liefert es Quelldateien ungebündelt über native ES-Module aus – mit sofortigem Kaltstart. Für die Produktion wird Rollup zum Bündeln verwendet. Die Developer Experience ist deutlich schneller als bei Webpack.
So funktioniert Vites Dev-Server
Moderne Browser unterstützen ES-Module nativ. Vite liefert Quelldateien unverändert aus und transformiert TypeScript/JSX bei Bedarf. Kein Bundling bedeutet keine Wartezeit beim Kaltstart.
Hot Module Replacement
HMR ersetzt Module, ohne die Seite neu zu laden. Vites HMR basiert auf ESM und ist deutlich schneller als das von Webpack. Die meisten Frameworks (React, Vue, Svelte) binden es für Aktualisierungen auf Komponentenebene mit Erhalt des Zustands ein.
Grundlagen der Vite-Konfiguration
Konfigurieren Sie Vite über vite.config.ts im Projektstamm.
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: { port: 5173 },
build: {
outDir: 'dist',
sourcemap: true,
rollupOptions: {
output: {
manualChunks: {
react: ['react', 'react-dom']
}
}
}
}
});Das Plugin-System
Vite-Plugins sind eine Erweiterung von Rollup-Plugins und bieten zusätzliche Hooks für den Dev-Server. Ein Plugin ist ein Objekt (oder eine Funktion, die eines zurückgibt) mit benannten Hooks.
// myPlugin.ts
export default function myPlugin() {
return {
name: 'my-plugin',
transform(code, id) {
if (!id.endsWith('.mdx')) return null;
// transform MDX to JS:
return { code: compileMdx(code), map: null };
},
handleHotUpdate(ctx) {
// react to file changes
}
};
}
// vite.config.ts
import myPlugin from './myPlugin';
export default { plugins: [myPlugin()] };Wichtige Hooks
transform(code, id): Dateiinhalt ändern (z. B. MDX kompilieren, env einschleusen). load(id): Inhalte für virtuelle Module bereitstellen. resolveId(source): Die Modulauflösung anpassen. configureServer(server): Middleware zum Dev-Server hinzufügen.
Beliebte Plugins
@vitejs/plugin-react (React + Fast Refresh). @vitejs/plugin-vue. vite-plugin-pwa. vite-plugin-svgr (SVGs als Komponenten importieren). vite-plugin-checker (TypeScript / ESLint im Overlay). vite-plugin-mkcert (lokales HTTPS).
Vite-SSR-Modus
Vite unterstützt serverseitiges Rendering mit Low-Level-Primitiven. Frameworks wie Nuxt, SvelteKit, Remix und Astro bauen darauf auf. Für benutzerdefiniertes SSR folgen Sie dem SSR-Leitfaden von Vite.
// server.ts
import { createServer } from 'vite';
const vite = await createServer({
server: { middlewareMode: true },
appType: 'custom'
});
express()
.use(vite.middlewares)
.use('*', async (req, res) => {
const url = req.originalUrl;
let template = await readFile('index.html', 'utf-8');
template = await vite.transformIndexHtml(url, template);
const { render } = await vite.ssrLoadModule('/src/entry-server.ts');
const appHtml = await render(url);
res.send(template.replace('<!--app-html-->', appHtml));
});Für SSR bauen
Zwei Builds: Client und Server. vite build --ssr entry-server.ts gibt das Server-Bundle aus.
// package.json
"scripts": {
"build:client": "vite build",
"build:server": "vite build --ssr src/entry-server.ts",
"build": "npm run build:client && npm run build:server"
}Umgebungsvariablen
import.meta.env.MODE ist 'development' oder 'production'. Benutzerdefinierte Variablen mit dem Präfix VITE_ werden bereitgestellt.
CSS-Verarbeitung
Vite verarbeitet CSS, CSS Modules (foo.module.css), PostCSS (entdeckt postcss.config.js automatisch) und CSS-Präprozessoren (Sass, Less, Stylus) standardmäßig. Injizieren Sie kritisches CSS über Plugins.
Vite vs. Webpack vs. Turbopack
Vite: ESM-nativer Dev-Server, Rollup-Builds, breites Ökosystem. Webpack: großer Legacy-Bundler, stärker konfigurierbar, langsamer. Turbopack (Vercel): Rust-basiert, mit Webpack kompatibel, derzeit in Next gebündelt. Für neue Projekte: Vite für SPAs, Next/Turbopack für Next-spezifische Projekte.
Kurzer Check
Warum ist der Kaltstart von Vites Dev-Server so viel schneller als der von Webpack?
Zusammenfassung: Vite
ESM-basierter Dev-Server: sofortiger Kaltstart, schnelles HMR. Für die Produktion wird Rollup verwendet. Plugins erweitern Rollups Hooks (transform, load, resolveId) sowie Vite-spezifische Hooks (configureServer, handleHotUpdate). SSR-Modus über createServer + middlewareMode; Build mit --ssr. Plugins für PWA, MDX, SVGR und mkcert. import.meta.env für Umgebungsvariablen. CSS Modules, PostCSS und Präprozessoren integriert.
Häufig gestellte Fragen
Ist die Lektion „Vite: Plugin-System und SSR-Modus“ kostenlos?
Ja — der vollständige Text von „Vite: Plugin-System und SSR-Modus“ 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: Plugin-System und SSR-Modus“?
Schreiben Sie ein Vite-Plugin mit transform- und load-Hooks, integrieren Sie Plugins von Drittanbietern und konfigurieren Sie Vite mit der Option ssrBuild für serverseitiges Rendering. 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 1 von 4.
Wie lange dauert die Lektion „Vite: Plugin-System und SSR-Modus“?
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
- Vite: Plugin-System und SSR-Modus
- esbuild: Geschwindigkeit und Einschränkungen
- pnpm Workspaces für Monorepos
- Turbo: Caching und Task-Pipelines