Bundler: Vite und webpack, JavaScript für den Browser bündeln

Kurz: Ein Bundler fasst viele Quellcode-Dateien und Pakete zu wenigen optimierten Dateien zusammen, die der Browser schnell laden kann.

Genauer: Moderne Web-Projekte bestehen aus hunderten Modulen, TypeScript, JSX, CSS-Varianten und Bibliotheken aus npm. Browser verstehen nicht alles davon direkt und würden bei jedem Modul eine eigene Anfrage stellen. Ein Bundler löst die Importe auf, wandelt Code um und liefert optimierte Dateien.

Im Detail

Was ein Bundler tut

• Abhängigkeiten auflösen: folgt allen import-Anweisungen und baut einen Abhängigkeitsgraphen.
• Transformieren: TypeScript, JSX, neuere Sprachfeatures und SCSS in Browser-taugliches JavaScript/CSS umwandeln.
• Bündeln und Aufteilen: Module zusammenfassen und in sinnvolle Chunks zerlegen, damit nur gebraucht wird, was eine Seite benötigt (Code Splitting).
• Optimieren: Minifizieren, ungenutzten Code entfernen (Tree Shaking), Bilder und Schriften verarbeiten, Dateinamen mit Hash für langes Caching.
• Entwicklungsserver mit Hot Module Replacement.

webpack

Lange Zeit der Standard, sehr flexibel durch Loader und Plugins, aber komplexe Konfiguration und langsamer Start bei großen Projekten. Viele ältere Projekte und Frameworks nutzen es weiterhin.

Vite und neuere Werkzeuge

Vite nutzt im Entwicklungsmodus die nativen ES-Module des Browsers: Dateien werden erst bei Bedarf umgewandelt (mit esbuild), der Start ist in Sekundenbruchteilen da. Für den Produktionsbau kommt Rollup (in neueren Versionen Rolldown) zum Einsatz. Weitere: esbuild (sehr schnell, in Go), SWC und Turbopack/Rspack (in Rust) sowie Parcel (wenig Konfiguration). Next.js und andere Frameworks bringen ihren Bundler mit.

Praxis

npm create vite@latest meine-app -- --template react-ts
cd meine-app && npm install
npm run dev        # Entwicklungsserver
npm run build      # Produktionsdateien in dist/

Die dist/-Dateien lassen sich auf jedem statischen Hosting ausliefern. Achte auf die Bundle-Größe (Analyse-Werkzeuge wie rollup-plugin-visualizer), große Bibliotheken lohnen Alternativen. Mit HTTP/2 und HTTP/3 ist Bündeln weniger zwingend als früher, aber Optimierung und Transformation bleiben nötig.

Siehe auch: Tree Shaking, Node.js, Lighthouse und Core Web Vitals, TypeScript