Components verzögert laden
Verzögern Sie das Rendern nicht kritischer Components mit dynamischen Imports und Intersection Observers.
Components verzögert laden ist eine kostenlose Sveltejs 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 Sveltejs Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum Lazy Loading
Verzögern Sie das Laden umfangreicher oder nicht kritischer Komponenten, um die Größe des initialen Bundles zu reduzieren.
Dynamischer Import
Verwenden Sie import(), um ein Modul asynchron zu laden.
let Component;
onMount(async () => {
Component = (await import("./Heavy.svelte")).default;
});Nach dem Laden rendern
Verwenden Sie <svelte:component>, um die dynamische Komponente zu rendern.
{#if Component}
<svelte:component this={Component} />
{/if}Intersection Observer
Kombinieren Sie dies mit IntersectionObserver, um zu laden, sobald der Platzhalter in den sichtbaren Bereich gelangt.
Action-Wrapper
Erstellen Sie eine wiederverwendbare use:lazy-Action, die dieses Muster kapselt.
Ladezustand
Zeigen Sie ein Skeleton oder einen Spinner an, bis die Komponente geladen ist.
Verwendung unterhalb des sichtbaren Bereichs
Kommentare, verwandte Beiträge und Footer-Widgets eignen sich alle für Lazy Loading.
Performance-Gewinne
Reduziert das initiale JS und beschleunigt die TTI, insbesondere auf Mobilgeräten.
Prefetching
Laden Sie Module optional beim Darüberfahren mit dem Mauszeiger oder in der Nähe des sichtbaren Bereichs vor, damit Interaktionen schneller reagieren.
Übermäßiges Aufteilen vermeiden
Bei kleinen Komponenten wiegt der Overhead des dynamischen Imports schwerer als die Einsparung.
Mit Streaming kombinieren
Bei serverseitig gerenderten Seiten sorgt Streaming plus Lazy Hydration für schnelle erste Paints.
Schnelltest
Wie rendern Sie eine dynamisch importierte Komponente?
Zusammenfassung
Laden Sie umfangreiche Komponenten mit dynamischem Import plus svelte:component verzögert und lösen Sie dies optional über den Intersection Observer aus.
Häufig gestellte Fragen
Ist die Lektion „Components verzögert laden“ kostenlos?
Ja — der vollständige Text von „Components verzögert laden“ 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 „Components verzögert laden“?
Verzögern Sie das Rendern nicht kritischer Components mit dynamischen Imports und Intersection Observers. 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 3 von 4.
Wie lange dauert die Lektion „Components verzögert laden“?
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