Eine kurze Anleitung zu Async-Komponenten in Svelte 5

Ich konnte online keine funktionierende Lösung dafür finden, deshalb habe ich mir überlegt, sie zu teilen, sobald ich sie zum Laufen gebracht habe.

Das Problem: Asynchrone Komponenten

Ich brauchte eine Wartungsseite, die bei Aktivierung die gesamte Website einnimmt, aber das Laden bei jedem Seitenbesuch erschien mir verschwenderisch. Die Komponente sollte nur dann geladen werden, wenn sie tatsächlich benötigt wird.

Die Lösung: Kombination von {#await} mit dynamischen Importen

Mit dem {#await}-Block in Svelte können Sie Versprechen direkt in Ihrer Vorlage verarbeiten. Kombinieren Sie dies mit dynamischem import() für Lazy-Loading, und Sie haben eine prägnante und klare Möglichkeit, mit asynchronen Komponenten umzugehen.

Hier ist der Code:

<script>
  // info.maintenance (boolean) && info.maintenance_ends (timestamp)
  export let info;
   const MaintenanceComponent = info?.maintenance 
    ? import("$lib/components/Maintenance.svelte")
    : null;
</script>

{#if MaintenanceComponent}
  {#await MaintenanceComponent then M}
    {@const Maintenance = M.default}
    <Maintenance time={info.maintenance_ends} />
  {:catch error}
    <p>Failed to load maintenance page: {error.message}</p>
  {/await}
{/if}

Was passiert hier?

• Dynamischer Import: Ich habe import() verwendet, um die Maintenance.svelte-Komponente asynchron zu laden. Dadurch wird sichergestellt, dass die Komponente nur geladen wird, wenn der Wartungsmodus aktiviert ist.
• {#await} Block: Mit diesem Block kann ich auf den Import warten.
• {@const}: Svelte 5 führt {@const} in Vorlagenblöcken ein, mit dem Sie den Standardexport (M.default) in eine lokale Variable extrahieren können.

Profi-Tipp: Halten Sie asynchrone Vorgänge von $effect-Runen fern – sie passen nicht gut zusammen und TypeScript wird Sie darüber informieren.

Viel Spaß beim Hacken!

Das obige ist der detaillierte Inhalt vonEine kurze Anleitung zu Async-Komponenten in Svelte 5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!