开箱即用，SvelteKit 会做很多工作来确保您的应用程序尽可能高效： * 代码拆分，以便只加载当前页面所需的代码 * 资产预加载，以防止'瀑布'（请求其他文件的文件请求） * 文件哈希，以便您的资产可以永久缓存 * 请求合并，以便从单独的服务器中获取的 `load` 函数的数据被组合成一个单独的 HTTP 请求 * 并行加载，以便单独的通用`load`函数同时获取数据 * 数据内联，以便在服务器渲染期间使用 `fetch` 发出的请求可以在浏览器中重放，而无需发出新的请求 * 保守失效，以便只有在必要时才重新运行 `load` 函数 * 预渲染（如有必要，可按路由进行配置）以便在没有动态数据的情况下即时提供页面 * 链接预加载，以便客户端导航所需的数据和代码需求被积极期待 尽管如此，我们（目前）还不能消除所有导致缓慢的来源。为了获得最佳性能，您应该注意以下提示。 ## 诊断问题 谷歌的[PageSpeed Insights](https://pagespeed.web.dev/)和（用于更深入的分析）[WebPageTest](https://www.webpagetest.org/)是了解已部署到互联网的网站性能特性的绝佳方式。 您的浏览器还包含用于分析您的网站（无论是已部署还是本地运行）的有用开发者工具： * Chrome - [灯塔](https://developer.chrome.com/docs/lighthouse/overview#devtools)，[网络](https://developer.chrome.com/docs/devtools/network)和[性能](https://developer.chrome.com/docs/devtools/performance)开发者工具 * Edge - [灯塔](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/lighthouse/lighthouse-tool)，[网络](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/network/)和[性能](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/evaluate-performance/)开发工具 * Firefox - [网络](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/) 和 [性能](https://hacks.mozilla.org/2022/03/performance-tool-in-firefox-devtools-reloaded/) 开发者工具 * Safari - [提升您网页的性能](https://developer.apple.com/library/archive/documentation/NetworkingInternetWeb/Conceptual/Web_Inspector_Tutorial/EnhancingyourWebpagesPerformance/EnhancingyourWebpagesPerformance.html) 请注意，您的网站在本地以`开发`模式运行时，其行为将与您的生产应用不同，因此在构建后，您应该在[预览](building-your-app#Preview-your-app)模式下进行性能测试。 ### 仪表化 如果您在浏览器的网络标签页中看到 API 调用耗时较长，并且想了解原因，您可以考虑使用像[OpenTelemetry](https://opentelemetry.io/)或[Server-Timing 头](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Server-Timing)这样的工具来对您的后端进行监控。 ## 优化资产 ### 图片 减小图像文件的大小通常是您可以对网站性能产生最显著影响的更改之一。Svelte 提供了`@sveltejs/enhanced-img`包，该包在[图像](images)页面上有详细说明，以使这一过程更加简便。此外，Lighthouse 工具有助于识别最严重的违规行为。 ### 视频 视频文件可能非常大，因此应特别注意确保它们已优化： * 使用如[Handbrake](https://handbrake.fr/)等工具压缩视频。考虑将视频转换为适合网页的格式，如`.webm`或`.mp4`。 * 您可以使用`preload="none"`（尽管请注意，当用户*启动*时，这将减慢播放速度）来懒加载位于页面底部的`lazy-load videos`。 * 从静音视频中提取音频轨道，使用类似[FFmpeg](https://ffmpeg.org/)的工具。 ### 字体 SvelteKit 在用户访问页面时自动预加载关键的`.js`和`.css`文件，但默认情况下它不会预加载字体，因为这可能会导致下载不必要的文件（例如，CSS 中引用但当前页面实际未使用的字体粗细），因此，正确地预加载字体可以大大提高网站的感觉速度。在您的[`handle`](hooks#Server-hooks-handle)钩子中，您可以调用带有包含您的字体的`preload`过滤器的`resolve`。 您可以通过[子集化](https://web.dev/learn/performance/optimize-web-fonts#subset_your_web_fonts)字体来减小字体文件的大小。 ## 减小代码大小 ### Svelte 版本 我们推荐运行最新的 Svelte 版本。Svelte 5 比 Svelte 4 更小、更快，而 Svelte 4 比 Svelte 3 更小、更快。 ### 包 [`rollup-plugin-visualizer`](https://www.npmjs.com/package/rollup-plugin-visualizer) 可帮助您识别哪些包对您网站大小的贡献最大。您还可以通过手动检查构建输出（在您的 [Vite 配置](https://vitejs.dev/config/build-options.html#build-minify) 中使用 `build: { minify: false }` 使输出可读）或通过浏览器开发者工具的网络标签来找到移除代码的机会，但请记住在部署您的应用程序之前撤销该操作。 ### 外部脚本 尝试最小化在浏览器中运行的第三方脚本数量。例如，与其使用基于 JavaScript 的分析，不如考虑使用服务器端实现，例如许多平台提供的带有 SvelteKit 适配器的那些，包括[Cloudflare](https://www.cloudflare.com/web-analytics/)、[Netlify](https://docs.netlify.com/monitor-sites/site-analytics/)和[Vercel](https://vercel.com/docs/analytics)。 要在一个 Web Worker 中运行第三方脚本（这可以避免阻塞主线程），请使用[Partytown 的 SvelteKit 集成](https://partytown.builder.io/sveltekit)。 ### 选择加载 代码使用静态`import`声明导入时，将自动与页面其余部分捆绑。如果只有当某些条件满足时才需要某段代码，请使用动态`import(...)`形式来选择性地懒加载组件。 ## 导航 ### 预加载 您可以通过预先加载必要的代码和数据来加快客户端导航，使用[链接选项](link-options)。这在新创建的 SvelteKit 应用中默认配置在``元素上。 ### 非必要数据 对于需要延迟加载且不需要立即使用的数据，您从 `load` 函数返回的对象可以包含承诺而不是数据本身。对于服务器的 `load` 函数，这将导致数据在导航（或初始页面加载）后 [流式传输](load#Streaming-with-promises)。 ### 防止瀑布 最大的性能杀手之一被称为“瀑布”，它是一系列按顺序发出的请求。这可能在服务器或浏览器中发生。 * 资产瀑布可能在浏览器中发生，当您的 HTML 请求 JS，JS 请求 CSS，CSS 请求背景图片和 Web 字体时。SvelteKit 将通过添加`modulepreload`标签或头部来在很大程度上解决这类问题，但您应该查看[开发工具中的网络标签](#Diagnosing-issues)，以检查是否需要预加载其他资源。如果您使用 Web[字体](#Optimizing-assets-Fonts)，请特别注意这一点，因为它们需要手动处理。 * 如果通用的`加载`函数调用 API 获取当前用户，然后使用该响应的详细信息获取已保存项的列表，接着使用*该*响应获取每个项的详细信息，浏览器最终将执行多个连续请求。这对性能是致命的，尤其是对于物理位置远离您后端服务的用户。尽可能使用[服务器`加载`函数](load#Universal-vs-server)来避免这个问题。 * 服务器 `加载` 函数也不免受瀑布效应的影响（尽管它们的成本要低得多，因为它们很少涉及与高延迟的往返）。例如，如果您查询数据库以获取当前用户，然后使用该数据对保存的项目列表进行第二次查询，通常使用数据库连接发出单个查询会更高效。 ## 托管 您的前端应位于与后端相同的数据中心，以最小化延迟。对于没有中央后端的服务站，许多 SvelteKit 适配器支持部署到边缘，这意味着从附近的服务器处理每个用户的请求。这可以显著减少加载时间。一些适配器甚至支持在每条路由上[配置部署](page-options#config)。您还应考虑从 CDN（通常是边缘网络）提供图片——许多 SvelteKit 适配器的宿主将自动执行此操作。 确保您的服务器使用 HTTP/2 或更高版本。Vite 的代码拆分创建了多个小文件以提高缓存性，从而实现卓越的性能，但这假设您的文件可以在 HTTP/2 下并行加载。 ## 进一步阅读 对于大多数情况，构建一个高性能的 SvelteKit 应用与构建任何高性能的 Web 应用相同。你应该能够将来自通用性能资源（如[核心 Web 指标](https://web.dev/explore/learn-core-web-vitals)）的信息应用于你构建的任何 Web 体验。