性能
开箱即用，SvelteKit 进行了大量工作，以使您的应用程序尽可能地高效
- 代码分割，以便仅加载当前页面所需的代码
- 资产预加载，以防止“瀑布”（文件请求其他文件）
- 文件哈希，以便您的资产可以永远缓存
- 请求合并，以便从单独的服务器
load函数获取的数据被分组到单个 HTTP 请求中 - 并行加载，以便单独的通用
load函数同时获取数据 - 数据内联，以便在服务器渲染期间使用
fetch发出的请求可以在浏览器中重放，而无需发出新的请求 - 保守失效，以便仅在必要时重新运行
load函数 - 预渲染（如有必要，可以在每个路由的基础上配置），以便可以立即提供没有动态数据的页面
- 链接预加载，以便及早预测客户端导航的数据和代码需求
尽管如此，我们还无法（尚未）消除所有缓慢的来源。为了获得最大的性能，您应该注意以下提示。
诊断问题
Google 的 PageSpeed Insights 和（对于更高级的分析）WebPageTest 是了解已部署到互联网的站点的性能特征的绝佳方法。
您的浏览器还包含有用的开发者工具，用于分析您的站点，无论是在部署还是在本地运行
- Chrome - Lighthouse、网络 和 性能 开发者工具
- Edge - Lighthouse、网络 和 性能 开发者工具
- Firefox - 网络 和 性能 开发者工具
- Safari - 提高网页性能
请注意，您在本地以 dev 模式运行的站点将表现出与生产应用不同的行为，因此您应该在构建后以 预览 模式进行性能测试。
检测
如果您在浏览器的网络选项卡中看到 API 调用花费了很长时间，并且您想知道原因，您可以考虑使用 OpenTelemetry 或 Server-Timing 标头 等工具检测您的后端。
优化资产
图像
减少图像文件的大小通常是您可以对站点性能进行的最有影响力的更改之一。Svelte 提供了 @sveltejs/enhanced-img 包，在 图像 页面上有详细说明，以便更轻松地实现此目的。此外，Lighthouse 可用于识别最严重的违规行为。
视频
视频文件可能非常大，因此应格外注意确保对其进行优化
- 使用 Handbrake 等工具压缩视频。考虑将视频转换为对网络友好的格式，例如
.webm或.mp4。 - 您可以 延迟加载位于折叠线以下的视频，使用
preload="none"（但请注意，这会降低用户确实启动视频时的播放速度）。 - 使用 FFmpeg 等工具从静音视频中去除音频轨道。
字体
SvelteKit 会在用户访问页面时自动预加载关键的 .js 和 .css 文件，但默认情况下不会预加载字体，因为这可能会导致不必要的文件（例如 CSS 中引用的但当前页面上实际上未使用 的字体权重）被下载。话虽如此，正确预加载字体可以极大地提高站点的加载速度。在您的 handle 钩子中，您可以使用包含您的字体的 preload 过滤器调用 resolve。
您可以通过 子集化您的字体来减小字体文件的大小。
减少代码大小
Svelte 版本
我们建议运行最新版本的 Svelte。Svelte 5 比 Svelte 4 更小更快，Svelte 4 比 Svelte 3 更小更快。
包
rollup-plugin-visualizer 可以帮助您识别哪些包对站点大小的贡献最大。您还可以通过手动检查构建输出（在您的 Vite 配置 中使用 build: { minify: false } 使输出可读，但请记住在部署应用程序之前撤消此操作）或通过浏览器的开发者工具的网络选项卡找到删除代码的机会。
外部脚本
尝试最大程度地减少在浏览器中运行的第三方脚本的数量。例如，与其使用基于 JavaScript 的分析，不如考虑使用服务器端实现，例如许多平台（包括 Cloudflare、Netlify 和 Vercel）与 SvelteKit 适配器一起提供的那些实现。
要在 Web Worker 中运行第三方脚本（这避免了阻塞主线程），请使用 Partytown 的 SvelteKit 集成。
选择性加载
使用静态 import 声明导入的代码将自动与页面其余部分捆绑在一起。如果只需要在满足某些条件时才需要一段代码，请使用动态 import(...) 形式来选择性地延迟加载组件。
导航
预加载
您可以通过使用 链接选项 提前预加载必要的代码和数据来加快客户端导航速度。当您创建新的 SvelteKit 应用程序时，在 <body> 元素上默认配置了此选项。
非必要数据
对于不需要立即加载的缓慢加载数据，load 函数返回的对象可以包含 Promise 而不是数据本身。对于服务器 load 函数，这会导致数据在导航（或初始页面加载）后 流式传输。
防止瀑布
最大的性能杀手之一被称为瀑布，它是一系列顺序发出的请求。这可能发生在服务器上或浏览器中。
- 当您的 HTML 请求 JS 请求 CSS 请求背景图像和网络字体时，资产瀑布可能会在浏览器中发生。SvelteKit 将通过添加
modulepreload标签或标头在很大程度上为您解决此类问题，但您应该查看 开发者工具中的网络选项卡 以检查是否需要预加载其他资源。如果您使用网络 字体，请特别注意这一点，因为需要手动处理它们。 - 如果通用
load函数发出 API 调用以获取当前用户，然后使用该响应中的详细信息来获取已保存项目的列表，然后使用该响应来获取每个项目的详细信息，则浏览器最终将发出多个顺序请求。这对性能来说是致命的，尤其对于物理位置远离后端的用户而言。通过尽可能使用 服务器load函数 来避免此问题。 - 服务器
load函数也不免受瀑布的影响（尽管它们成本要低得多，因为它们很少涉及高延迟的往返行程）。例如，如果您查询数据库以获取当前用户，然后使用该数据发出第二个查询以获取已保存项目的列表，则通常发出带有数据库联接的单个查询的性能会更高。
托管
您的前端应该位于与后端相同的数据中心，以最大程度地减少延迟。对于没有中央后端的网站，许多 SvelteKit 适配器支持部署到边缘，这意味着从附近的服务器处理每个用户的请求。这可以显著减少加载时间。一些适配器甚至支持按路由配置部署。您还应该考虑从 CDN（通常是边缘网络）提供图像——许多 SvelteKit 适配器的宿主会自动执行此操作。
确保您的主机使用 HTTP/2 或更高版本。Vite 的代码分割创建了许多用于改进可缓存性的小型文件，从而带来出色的性能，但这确实假设您的文件可以使用 HTTP/2 并行加载。
进一步阅读
在大多数情况下，构建高性能的 SvelteKit 应用程序与构建任何高性能 Web 应用程序相同。您应该能够将来自通用性能资源（例如核心 Web 指标）的信息应用于您构建的任何 Web 体验。