Wie man Komponenten in Svelte Lazy Loading anwendet

Ihre Svelte-App mag standardmäßig schnell sein, aber wenn Sie einen Rich-Text-Editor, eine Chart-Bibliothek oder ein komplexes Dashboard-Widget in Ihr initiales JavaScript-Payload bündeln, laden Benutzer Code herunter, den sie möglicherweise nie verwenden. Lazy Loading auf Komponentenebene in Svelte behebt dies, indem diese schweren Imports erst dann geladen werden, wenn sie tatsächlich benötigt werden.

Im Gegensatz zu React verfügt Svelte über keinen eingebauten lazy()-Helper. Stattdessen basiert Lazy Loading direkt auf der nativen import()-Funktion von JavaScript in Kombination mit bedingtem Rendering. Es ist manueller, aber auch flexibler.

Warum Lazy Loading auf Komponentenebene in SvelteKit weiterhin wichtig ist

SvelteKit übernimmt bereits automatisch das Code-Splitting auf Routen-Ebene. Jede Route erhält ihren eigenen Chunk, sodass die Navigation zwischen Seiten das initiale Bundle nicht aufbläht. Aber innerhalb einer einzelnen Seite wird alles, was Sie am Anfang einer .svelte-Datei importieren, zusammen gebündelt und vorab geladen.

Hier wird Lazy Loading auf Komponentenebene wertvoll. Wenn eine Seite eine schwere Chart-Komponente, einen Video-Player oder ein Modal enthält, das erst nach Benutzerinteraktion erscheint, gibt es keinen Grund, diesen Code beim Seitenaufruf zu laden.

SvelteKit baut mit Vite, das dynamische Imports nativ verarbeitet. Wenn Vite import('./HeavyChart.svelte') sieht, teilt es dieses Modul automatisch in einen separaten Chunk auf. Keine zusätzliche Konfiguration erforderlich.

Wie man Svelte-Komponenten Lazy Loading anwendet: Kernmuster

Grundlegendes Lazy Loading mit {#await}

Der einfachste Ansatz verwendet Sveltes {#await}-Block direkt im Template:

<!-- src/routes/+page.svelte -->
<script>
  let showChart = false;
  let chartData = [1, 2, 3];
</script>

<button onclick={() => showChart = true}>Load Chart</button>

{#if showChart}
  {#await import('$lib/components/HeavyChart.svelte')}
    <p>Loading chart...</p>
  {:then Chart}
    <Chart.default data={chartData} />
  {:catch error}
    <p>Failed to load chart: {error.message}</p>
  {/await}
{/if}

Dies funktioniert sowohl in Svelte 4 als auch in Svelte 5. Der {:catch}-Block ist wichtig — Netzwerkfehler passieren, und stille Fehler machen das Debugging schmerzhaft. In Svelte 4 verwendet man typischerweise <svelte:component this={Component}> für dynamisches Wechseln von Komponenten. In modernem Svelte kann das Ändern der Komponentenreferenz auch direkt ein erneutes Rendering auslösen.

Der Browser cached das Modul nach dem ersten Import. Nachfolgende Renderings derselben Komponente lösen keine neue Netzwerkanfrage aus.

Laden beim Hovern für schnellere wahrgenommene Performance

Ein gängiges Muster ist es, mit dem Laden zu beginnen, wenn der Benutzer Absicht signalisiert — beim Hovern über ein Auslöserelement:

<!-- src/routes/+page.svelte -->
<script lang="ts">
  import type { Component } from 'svelte';

  let HeavyWidget: Component<{ message: string }> | null = $state(null);

  async function loadWidget() {
    if (!HeavyWidget) {
      const module = await import('$lib/components/HeavyWidget.svelte');
      HeavyWidget = module.default;
    }
  }
</script>

<div onmouseenter={loadWidget}>
  <p>Hover to preload the widget</p>
</div>

{#if HeavyWidget}
  <HeavyWidget message="Ready!" />
{/if}

Dies funktioniert gut für Tooltips, Popovers und Sidebars. Die Komponente beginnt zu laden, bevor der Benutzer klickt, sodass sie zum Zeitpunkt der Interaktion oft bereits gecached ist.

Laden, wenn der Browser im Leerlauf ist

Für nicht-kritische Komponenten, die die Seite verbessern, aber nicht sofort benötigt werden, verwenden Sie requestIdleCallback:

<script lang="ts">
  import { onMount } from 'svelte';
  import type { Component } from 'svelte';

  let FeedbackWidget: Component | null = $state(null);

  onMount(() => {
    const load = () =>
      import('$lib/components/FeedbackWidget.svelte').then(
        (m) => (FeedbackWidget = m.default)
      );

    if ('requestIdleCallback' in window) {
      requestIdleCallback(load);
    } else {
      setTimeout(load, 300); // Fallback für Safari
    }
  });
</script>

{#if FeedbackWidget}
  <FeedbackWidget />
{/if}

Beachten Sie, dass die Safari-Unterstützung für requestIdleCallback historisch inkonsistent war, daher wird der setTimeout-Fallback empfohlen.

Wann man kein Lazy Loading verwenden sollte

Nicht jede Komponente profitiert von Lazy Loading. Vermeiden Sie es für:

• Above-the-fold UI — Navigation, Hero-Bereiche, primärer Inhalt
• Kleine Komponenten — der asynchrone Overhead überwiegt die Einsparungen
• Komponenten, die sofort beim Mount benötigt werden — das Lade-Flackern verschlechtert die UX

Übermäßiges Aufteilen erzeugt viele kleine asynchrone Chunks. Moderne Bundler wie Vite handhaben dies effizient, aber es gibt dennoch einen Punkt abnehmender Erträge.

Fazit

Lazy Loading von Svelte-Komponenten läuft auf eines hinaus: import() anstelle eines statischen Imports zu verwenden und dann das Ergebnis bedingt zu rendern. Der Vite-basierte Build von SvelteKit übernimmt das Code-Splitting automatisch. Die drei oben genannten Muster — bei Bedarf, beim Hovern und im Leerlauf — decken die meisten realen Szenarien ab. Wählen Sie den Auslöser, der dem Zeitpunkt entspricht, zu dem Benutzer die Komponente tatsächlich benötigen, fügen Sie Fehlerbehandlung hinzu, und Ihr initiales Bundle bleibt schlank.

FAQs

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.