Bundling-Konzepte: Tree Shaking und Code Splitting
Verstehen Sie, wie Bundler ungenutzte Exports per Tree Shaking entfernen und die Ausgabe für schnellere anfängliche Seitenladezeiten in Chunks aufteilen.
Bundling-Konzepte: Tree Shaking und Code Splitting ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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 macht ein Bundler?
Ein Bundler (Vite, webpack, Rollup, Parcel) liest Ihre Quelldateien, löst Importe auf, transformiert den Code (Transpilierung, Minifizierung, Optimierung) und gibt Dateien aus, die der Browser effizient laden kann.
Modulgraph
Der Bundler beginnt bei einem Entry Point und folgt jedem Import, um einen Modulgraphen zu erstellen — eine vollständige Übersicht über den gesamten Code, den Ihre App verwendet. Dieser Graph bildet die Grundlage für alle Optimierungen.
Tree-Shaking — Entfernen toten Codes
Tree-Shaking analysiert den Modulgraphen und entfernt Exporte, die nie importiert werden. Nur statische ES-Modul-Importe ermöglichen Tree-Shaking — CommonJS require() ist dynamisch und kann nicht statisch analysiert werden.
// utils.js
export const add = (a, b) => a + b; // used → included
export const multiply = (a, b) => a * b; // never imported → removed
// app.js
import { add } from './utils.js';
console.log(add(2, 3));Seiteneffekte und sideEffects: false
Wenn Ihre Bibliothek keine Seiteneffekte hat (nur reine Re-Exports), fügen Sie "sideEffects": false zu package.json hinzu. Dadurch wissen Bundler, dass sie jede nicht importierte Datei aus Ihrem Paket sicher entfernen können.
// package.json of a library:
{
"sideEffects": false
// or list files with side effects:
"sideEffects": ["./src/polyfills.js"]
}Code-Splitting
Code-Splitting teilt das Bundle in mehrere Chunks auf, die bei Bedarf geladen werden. Der Haupt-Chunk bleibt klein, damit der erste Ladevorgang schnell ist. Sekundäre Chunks werden erst geladen, wenn sie benötigt werden (Lazy-Routen, Feature-Schalter).
Aufteilen nach Entry Points
Multi-Page-Apps haben mehrere Entry Points, aus denen jeweils ein eigenes Bundle entsteht. Gemeinsamer Code (z. B. React) wird automatisch in einen gemeinsamen Chunk ausgelagert.
Aufteilen dynamischer Importe
Jeder dynamische Aufruf von import() erzeugt einen Split-Punkt. Der Bundler erstellt für das verzögert geladene Modul und alle seine eindeutigen Abhängigkeiten einen separaten Chunk.
// vite / rollup automatically creates a separate chunk:
const Admin = lazy(() => import('./Admin'));
const Reports = lazy(() => import('./Reports'));Vendor-Chunks
Code aus Node_modules ändert sich nur selten. Lagern Sie ihn mit einer langen Cache-TTL in einen Vendor-Chunk aus. Nutzer, die den Vendor-Chunk bereits im Cache haben, müssen bei Aktualisierungen nur den App-Chunk erneut herunterladen.
// vite.config.ts
build: {
rollupOptions: {
output: {
manualChunks: { vendor: ['react', 'react-dom'] }
}
}
}Minifizierung
Minifier (esbuild, terser) entfernen Leerzeichen, benennen Variablen in einzelne Buchstaben um und wenden weitere Reduzierungen an. Eine typische React-App wird durch die Minifizierung um 60–70 % kleiner.
Inhaltsbasierte Hashes
Bundler fügen einen Hash des Dateiinhalts in den Dateinamen ein: index-a1b2c3.js. Wenn sich der Inhalt ändert, ändert sich der Hash, der Dateiname ändert sich und der Browser ruft die neue Datei ab. Unveränderte Chunks werden unbegrenzt im Cache gespeichert.
Source Maps
Source Maps ordnen die minimierte Ausgabe wieder Ihrem ursprünglichen Quellcode zu. Sie werden separat erzeugt (nicht an Nutzer ausgeliefert) und von DevTools zum Debuggen verwendet. Aktivieren Sie sie mit build.sourcemap: true.
Kurztest
Was ist die wichtigste Voraussetzung dafür, dass Tree-Shaking funktioniert?
Zusammenfassung: Bundling-Konzepte
Bundler lösen den Modulgraphen auf, entfernen ungenutzte Exporte per Tree-Shaking (dafür sind statische ESM-Importe erforderlich), teilen Code für Lazy Loading in Chunks auf, lagern Vendor-Code zum Caching aus, minimieren die Ausgabe und fügen inhaltsbasierte Hashes zur Cache-Invalidierung hinzu. Source Maps ermöglichen das Debuggen minimierten Codes.
Häufig gestellte Fragen
Ist die Lektion „Bundling-Konzepte: Tree Shaking und Code Splitting“ kostenlos?
Ja — der vollständige Text von „Bundling-Konzepte: Tree Shaking und Code Splitting“ 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 „Bundling-Konzepte: Tree Shaking und Code Splitting“?
Verstehen Sie, wie Bundler ungenutzte Exports per Tree Shaking entfernen und die Ausgabe für schnellere anfängliche Seitenladezeiten in Chunks aufteilen. 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 4 von 4.
Wie lange dauert die Lektion „Bundling-Konzepte: Tree Shaking und Code Splitting“?
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