跳至主要内容

最佳实践

性能

在 GitHub 上编辑此页面

开箱即用，SvelteKit 会做很多工作，让你的应用程序尽可能高性能

  • 代码拆分，以便仅加载当前页面所需的代码
  • 资源预加载，以防止“瀑布”（文件请求其他文件）
  • 文件哈希，以便你的资源可以永久缓存
  • 请求合并，以便从单独的服务器 load 函数获取的数据分组到一个 HTTP 请求中
  • 并行加载，以便单独的通用 load 函数同时获取数据
  • 数据内联，以便在服务器渲染期间使用 fetch 发出的请求可以在浏览器中重播，而无需发出新请求
  • 保守失效，以便仅在必要时重新运行 load 函数
  • 预渲染（如果需要，可以在每个路由的基础上进行配置），以便可以立即提供没有动态数据的页面
  • 链接预加载，以便热切预期客户端导航的数据和代码要求

尽管如此，我们（目前）无法消除所有慢速来源。为了获得最大的性能，你应该注意以下提示。

诊断问题

Google 的 PageSpeed Insights 和（用于更高级的分析）WebPageTest 是了解已部署到互联网上的网站的性能特征的绝佳方式。

你的浏览器还包括有用的开发者工具，用于分析你的网站，无论是在部署还是在本地运行

请注意，在dev模式下本地运行的网站表现出的行为与你的生产应用程序不同，因此你应该在构建后以预览模式进行性能测试。

检测

如果你在浏览器的网络标签中看到某个 API 调用花费了很长时间，并且你希望了解原因，你可以考虑使用OpenTelemetry或Server-Timing 头等工具检测你的后端。

优化资产

图像

减小图像文件的大小通常是对网站性能影响最大的更改之一。Svelte 提供了@sveltejs/enhanced-image包，在图像页面上有详细说明，以简化此操作。此外，Lighthouse 有助于识别最严重的违规行为。

视频

视频文件可能非常大，因此应格外注意确保对其进行优化

  • 使用Handbrake等工具压缩视频。考虑将视频转换为.webm或.mp4等网络友好格式。
  • 你可以使用preload="none"对折页以下的视频进行延迟加载（但请注意，当用户确实启动它时，这会减慢播放速度）。
  • 使用FFmpeg等工具从静音视频中剥离音频轨道。

字体

当用户访问页面时，SvelteKit 会自动预加载关键的 .js 和 .css 文件，但它不会默认预加载字体，因为这可能会导致下载不必要的文件（例如 CSS 引用但当前页面实际上并未使用的字体粗细）。话虽如此，正确预加载字体可以极大地影响网站的加载速度。在 handle 钩子中，你可以使用包含字体的 preload 过滤器来调用 resolve。

你可以通过子集化字体来减小字体文件的大小。

减小代码大小

Svelte 版本

我们建议运行最新版本的 Svelte。Svelte 4 比 Svelte 3 更小、更快。（Svelte 5 预览版 更小、更快，但我们不建议你升级到此版本，直到它准备好投入生产。）

包

rollup-plugin-visualizer 可以帮助识别哪些包对网站的大小贡献最大。你还可以通过手动检查构建输出（在 Vite 配置 中使用 build: { minify: false } 使输出可读，但请记住在部署应用之前撤消此操作）或通过浏览器的 devtools 的网络选项卡来查找删除代码的机会。

外部脚本

尽量减少在浏览器中运行的第三方脚本数量。例如，考虑使用服务器端实现，而不是使用基于 JavaScript 的分析，例如许多平台提供的带有 SvelteKit 适配器的分析，包括 Cloudflare、Netlify 和 Vercel。

要在 Web 工作程序中运行第三方脚本（避免阻塞主线程），请使用 Partytown 的 SvelteKit 集成。

选择性加载

使用静态 import 声明导入的代码将自动与页面的其余部分捆绑在一起。如果你只需要在满足某些条件时使用一段代码，请改用动态 import(...) 形式。

你可以使用链接选项，急切预加载必要的代码和数据，以加快客户端导航。当你创建一个新的 SvelteKit 应用程序时，这在 <body> 元素上默认配置。

对于不需要立即加载的慢加载数据，从你的 load 函数返回的对象可以包含 Promise 而不是数据本身。对于服务器 load 函数，这将导致数据在导航（或初始页面加载）后流式传输进来。

最大的性能杀手之一被称为瀑布，即按顺序进行的一系列请求。这可能发生在服务器或浏览器中。

  • 当你的 HTML 请求 JS，而 JS 请求 CSS，而 CSS 请求背景图像和网络字体时，就会在浏览器中发生资源瀑布。SvelteKit 将通过添加modulepreload 标签或头，在很大程度上为你解决这类问题，但你应该查看开发工具中的网络标签，以检查是否需要预加载其他资源。如果你使用网络字体，请特别注意这一点，因为它们需要手动处理。
  • 如果一个通用的 load 函数调用 API 来获取当前用户，然后使用该响应中的详细信息来获取已保存项目的列表，然后使用该响应来获取每个项目的详细信息，那么浏览器最终将进行多个顺序请求。这对性能来说是致命的，特别是对于物理位置远离你的后端的用户。尽可能使用服务器 load 函数来避免此问题。
  • 服务器 load 函数也并非对瀑布免疫（尽管它们的花费要少得多，因为它们很少涉及高延迟的往返）。例如，如果你查询数据库以获取当前用户，然后使用该数据进行第二次查询以获取已保存项目的列表，那么通常通过使用带有数据库联接的单个查询会获得更好的性能。

托管

你的前端应位于与你的后端相同的数据中心，以最大程度地减少延迟。对于没有中央后端的网站，许多 SvelteKit 适配器支持部署到边缘，这意味着从附近的服务器处理每个用户的请求。这可以显著减少加载时间。一些适配器甚至支持按路由配置部署。你还可以考虑从 CDN（通常是边缘网络）提供图像 — 许多 SvelteKit 适配器的宿主会自动执行此操作。

确保你的主机使用 HTTP/2 或更新版本。Vite 的代码拆分创建了许多小文件以提高可缓存性，从而获得出色的性能，但这确实假设你的文件可以与 HTTP/2 并行加载。

延伸阅读

在大多数情况下，构建高性能 SvelteKit 应用程序与构建任何高性能 Web 应用程序相同。您应该能够将来自一般性能资源（例如 核心 Web 指标）的信息应用于您构建的任何 Web 体验。

上一个 打包
下一个 图像