Svelte 5 の非同期コンポーネントに関する短いガイド

これに関する有効な解決策がオンラインで見つからなかったので、機能するようになったら共有しようと思いました。

問題: 非同期コンポーネント

有効にするとサイト全体を引き継ぐメンテナンス ページが必要でしたが、ページにアクセスするたびにそれを読み込むのは無駄であるように思えました。コンポーネントは、実際に必要な場合にのみロードされる必要があります。

解決策: {#await} と動的インポートを組み合わせる

Svelte の {#await} ブロックを使用すると、テンプレート内で Promise を直接処理できます。これを動的 import() と組み合わせて遅延読み込みを行うと、非同期コンポーネントを処理するための簡潔かつ明確な方法が得られます。

コードは次のとおりです:

<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}

ここで何が起こっているのでしょうか？

• 動的インポート: import() を使用して、Maintenance.svelte コンポーネントを非同期的にロードしました。これにより、メンテナンス モードがオンになっている場合にのみコンポーネントがロードされるようになります。
• {#await} ブロック: このブロックにより、インポートを待つことができます。
• {@const}: Svelte 5 では、テンプレート ブロック内に {@const} が導入されており、これによりデフォルトのエクスポート (M.default) をローカル変数に抽出できるようになります。

プロのヒント: $effect ルーンに非同期操作を含めないでください。これらは一緒に使用するとうまく機能しません。TypeScript がそれについて通知します。

ハッピーハッキング!

以上がSvelte 5 の非同期コンポーネントに関する短いガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。