Code-Splitting und dynamische Imports
Teilen Sie Ihr Bundle automatisch nach Route auf und verwenden Sie dynamisches import() für bedarfsgeladene Chunks.
Code-Splitting und dynamische Imports ist eine kostenlose Sveltejs 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 Sveltejs Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Automatische Aufteilung
SvelteKit teilt Bundles automatisch pro Route auf. Besucher laden nur das JS für die Routen herunter, die sie aufrufen.
Dynamischer Import
Für eine granularere Aufteilung verwenden Sie import(), um Module bei Bedarf zu laden.
const Heavy = (await import("./Heavy.svelte")).default;Bedingtes Laden
Laden Sie eine umfangreiche Bibliothek nur, wenn eine bestimmte Benutzeraktion sie benötigt.
async function openEditor() {
const { default: Editor } = await import("./Editor.svelte");
// ...
}Chunk-Benennung
Vite benennt Chunks intelligent. Bei Bedarf können Sie mit Kommentaren im Stil von webpackChunkName Hinweise geben.
Vorabladen
Verwenden Sie data-sveltekit-preload-code, um den Routencode beim Darüberfahren mit dem Mauszeiger vorzuladen.
Bundle-Größe
Kleinere initiale Bundles sorgen für schnellere Seitenladezeiten und bessere Core Web Vitals.
Tree-Shaking
SvelteKit entfernt (über Vite/Rollup) ungenutzte Exporte automatisch per Tree-Shaking.
Lazy-Komponenten
Verpacken Sie dynamische Importe in Komponenten, die nach dem Laden gerendert werden.
Stolperfallen
Dynamische Importe fügen asynchrone Grenzen hinzu. Behandeln Sie Ladezustände sorgfältig.
Bundle-Analyse
Verwenden Sie Bundle-Visualisierer, um zu ermitteln, was als Nächstes aufgeteilt werden sollte.
Wann nicht aufteilen
Bei winzigen Modulen kostet die Aufteilung mehr, als sie einspart. Ermitteln Sie durch Profiling die passende Granularität.
Schnelltest
Wie teilt SvelteKit Bundles standardmäßig auf?
Zusammenfassung
Code-Splitting in SvelteKit erfolgt automatisch pro Route. Verwenden Sie import() für feiner abgestuftes Lazy Loading.
Häufig gestellte Fragen
Ist die Lektion „Code-Splitting und dynamische Imports“ kostenlos?
Ja — der vollständige Text von „Code-Splitting und dynamische Imports“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Sveltejs Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Code-Splitting und dynamische Imports“?
Teilen Sie Ihr Bundle automatisch nach Route auf und verwenden Sie dynamisches import() für bedarfsgeladene Chunks. Du übst Sveltejs 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 Sveltejs Academy zu starten?
Keine Vorkenntnisse erforderlich. Sveltejs 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 „Code-Splitting und dynamische Imports“?
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 Sveltejs Academy-Lektion Code schreiben und ausführen?
Ja. Jede Sveltejs 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
- Code-Splitting und dynamische Imports
- Bilder mit @sveltejs/enhanced-img optimieren
- Components verzögert laden
- SvelteKit-Apps profilieren