ホームページ >ウェブフロントエンド >jsチュートリアル >Svelte 5 の非同期コンポーネントに関する短いガイド
これに関する有効な解決策がオンラインで見つからなかったので、機能するようになったら共有しようと思いました。
有効にするとサイト全体を引き継ぐメンテナンス ページが必要でしたが、ページにアクセスするたびにそれを読み込むのは無駄であるように思えました。コンポーネントは、実際に必要な場合にのみロードされる必要があります。
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}
プロのヒント: $effect ルーンに非同期操作を含めないでください。これらは一緒に使用するとうまく機能しません。TypeScript がそれについて通知します。
ハッピーハッキング!
以上がSvelte 5 の非同期コンポーネントに関する短いガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。