如何在 Svelte 中懒加载组件

你的 Svelte 应用可能默认就很快,但如果你将富文本编辑器、图表库或复杂的仪表板组件打包到初始 JavaScript 负载中,用户就会下载他们可能永远不会使用的代码。Svelte 中的组件级懒加载通过延迟这些重型导入直到真正需要时才加载来解决这个问题。

与 React 不同,Svelte 没有内置的 lazy() 辅助函数。相反,懒加载直接依赖于 JavaScript 原生的 import() 函数结合条件渲染。这种方式更手动,但也更灵活。

为什么组件级懒加载在 SvelteKit 中仍然重要

SvelteKit 已经自动处理路由级代码分割。每个路由都有自己的代码块,因此在页面之间导航不会使初始包体积膨胀。但在单个页面内,你在 .svelte 文件顶部导入的所有内容都会被打包在一起并预先加载。

这就是组件级懒加载变得有价值的地方。如果页面包含重型图表组件、视频播放器或仅在用户交互后才出现的模态框,就没有理由在页面到达时加载这些代码。

SvelteKit 使用 Vite 构建,它原生支持动态导入。当 Vite 看到 import('./HeavyChart.svelte') 时,它会自动将该模块拆分为单独的代码块。无需额外配置。

如何懒加载 Svelte 组件:核心模式

使用 {#await} 进行基本懒加载

最简单的方法是直接在模板中使用 Svelte 的 {#await} 块:

<!-- src/routes/+page.svelte -->
<script>
  let showChart = false;
  let chartData = [1, 2, 3];
</script>

<button onclick={() => showChart = true}>加载图表</button>

{#if showChart}
  {#await import('$lib/components/HeavyChart.svelte')}
    <p>加载图表中...</p>
  {:then Chart}
    <Chart.default data={chartData} />
  {:catch error}
    <p>加载图表失败: {error.message}</p>
  {/await}
{/if}

这在 Svelte 4 和 Svelte 5 中都有效。{:catch} 块很重要——网络故障会发生,而静默错误会使调试变得痛苦。在 Svelte 4 中,动态切换组件通常使用 <svelte:component this={Component}>。在现代 Svelte 中,更改组件引用也可以直接触发重新渲染。

浏览器在首次导入后会缓存该模块。同一组件的后续渲染不会触发新的网络请求。

悬停时加载以提升感知性能

一个常见的模式是在用户发出意图信号时开始加载——悬停在触发元素上:

<!-- src/routes/+page.svelte -->
<script lang="ts">
  import type { Component } from 'svelte';

  let HeavyWidget: Component<{ message: string }> | null = $state(null);

  async function loadWidget() {
    if (!HeavyWidget) {
      const module = await import('$lib/components/HeavyWidget.svelte');
      HeavyWidget = module.default;
    }
  }
</script>

<div onmouseenter={loadWidget}>
  <p>悬停以预加载组件</p>
</div>

{#if HeavyWidget}
  <HeavyWidget message="准备就绪!" />
{/if}

这对于工具提示、弹出框和侧边栏效果很好。组件在用户点击之前就开始加载,因此当他们交互时,通常已经被缓存了。

浏览器空闲时加载

对于改善页面但不是立即需要的非关键组件,使用 requestIdleCallback:

<script lang="ts">
  import { onMount } from 'svelte';
  import type { Component } from 'svelte';

  let FeedbackWidget: Component | null = $state(null);

  onMount(() => {
    const load = () =>
      import('$lib/components/FeedbackWidget.svelte').then(
        (m) => (FeedbackWidget = m.default)
      );

    if ('requestIdleCallback' in window) {
      requestIdleCallback(load);
    } else {
      setTimeout(load, 300); // Safari 的降级方案
    }
  });
</script>

{#if FeedbackWidget}
  <FeedbackWidget />
{/if}

请注意,Safari 对 requestIdleCallback 的支持历来不一致,因此建议使用 setTimeout 作为降级方案。

何时不应该懒加载

并非每个组件都能从懒加载中受益。以下情况应避免使用:

• 首屏 UI — 导航、主视觉区、主要内容
• 小型组件 — 异步开销超过了节省的资源
• 挂载时立即需要的组件 — 加载闪烁会降低用户体验

过度拆分会创建许多小的异步代码块。像 Vite 这样的现代打包工具能高效处理这种情况,但仍然存在收益递减的临界点。

结论

懒加载 Svelte 组件归结为一件事:使用 import() 而不是静态导入,然后有条件地渲染结果。SvelteKit 基于 Vite 的构建会自动处理代码分割。上述三种模式——按需、悬停时和空闲时——涵盖了大多数实际场景。选择与用户实际需要组件时机相匹配的触发方式,添加错误处理,你的初始包就能保持精简。

常见问题

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.