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中文網其他相關文章！