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中文网其他相关文章！