前言
Svelte，一個語法簡潔、入門容易，面向未來的前端框架。
從 Svelte 誕生之初，就備受開發者的喜愛，根據統計，從 2019 年到 2024 年，連續 6 年一直是開發者最感興趣的前端框架 No.1：
Svelte 以其獨特的編譯時優化機制著稱，具有輕量級、高性能、易上手等特性，非常適合構建輕量級 Web 項目。
為了幫助大家學習 Svelte，我同時搭建了 Svelte 最新的中文文檔站點。
如果需要進階學習，也可以入手我的小冊《Svelte 開發指南》，語法篇、實戰篇、原理篇三大篇章帶你係統掌握 Svelte！
歡迎圍觀我的“網頁版朋友圈”、加入“冴羽·成長陪伴社羣”，踏上“前端大佬成長之路”。
性能
SvelteKit 開箱即用地做了很多工作來使您的應用程序儘可能高效：
- 代碼分割，因此只加載當前頁面所需的代碼
- 資源預加載，防止出現"瀑布（waterfalls）"（文件請求其他文件的情況）
- 文件哈希，使您的資源可以永久緩存
- 請求合併，將從不同服務端
load函數獲取的數據合併成單個 HTTP 請求 - 並行加載，不同的通用
load函數同時獲取數據 - 數據內聯，服務端渲染期間使用
fetch發出的請求可以在瀏覽器中重放而無需重新發出請求 - 保守的失效處理，因此
load函數僅在必要時重新運行 - 預渲染（如有必要，可按路由配置），使沒有動態數據的頁面可以立即提供服務
- 鏈接預加載，以便提前主動獲取客户端導航所需的數據和代碼
儘管如此，我們（尚）不能消除所有導致性能下降的因素。要獲得最大性能，您應該注意以下建議。
診斷問題
Google 的 PageSpeed Insights 和（用於更高級分析的）WebPageTest 是瞭解已部署到互聯網的網站性能特徵的出色工具。
您的瀏覽器還包含有用的開發者工具，用於分析您的網站，無論是已部署還是在本地運行：
- Chrome - Lighthouse、Network 和 Performance 開發工具
- Edge - Lighthouse、Network 和 Performance 開發工具
- Firefox - Network 和 Performance 開發工具
- Safari - 提升網頁性能
請注意，在 dev 模式下本地運行的網站會表現出與生產應用程序不同的行為，因此您應該在構建後在預覽模式下進行性能測試。
檢測
如果您在瀏覽器的網絡標籤中看到 API 調用耗時過長，想了解原因，您可以考慮使用 OpenTelemetry 或 Server-Timing 頭 等工具來檢測您的後端。
優化資源
圖片
減小圖片文件的大小通常是對網站性能影響最大的改變之一。Svelte 提供了 @sveltejs/enhanced-img 包，詳見圖片頁面，可以讓這個過程更容易。此外，Lighthouse 對識別性能影響最大的圖片很有幫助。
視頻
視頻文件可能非常大，因此應特別注意確保它們經過優化：
- 使用 Handbrake 等工具壓縮視頻。考慮將視頻轉換為
.webm或.mp4等 web 友好的格式。 - 您可以使用
preload="none"對摺疊區域以下的視頻進行延遲加載（但請注意，這會在用户開始播放時減慢播放速度）。 - 使用 FFmpeg 等工具從靜音視頻中刪除音軌。
字體
當用户訪問頁面時，SvelteKit 會自動預加載關鍵的 .js 和 .css 文件，但默認情況下不會預加載字體，因為這可能會導致下載不必要的文件（例如 CSS 中引用但實際上在當前頁面上未使用的字體粗細）。話雖如此，正確預加載字體可以對網站的速度感知產生很大影響。在您的 handle hook 中，您可以使用包含字體的 preload 過濾器調用 resolve。
通過子集化字體，您可以減小字體文件的大小。
減少代碼大小
Svelte 版本
我們推薦使用最新版本的 Svelte。Svelte 5 比 Svelte 4 更小更快，而 Svelte 4 又比 Svelte 3 更小更快。
包
rollup-plugin-visualizer 可以幫助識別哪些包對網站大小貢獻最大。您還可以通過手動檢查構建輸出發現刪除代碼的機會（在您的 Vite 配置中使用 build: { minify: false } 使輸出可讀，但記得在部署應用程序之前撤銷此更改），或通過瀏覽器開發工具的網絡標籤。
外部腳本
儘量減少在瀏覽器中運行的第三方腳本數量。例如，與其使用基於 JavaScript 的分析工具，不如考慮使用服務端實現，比如許多帶有 SvelteKit 適配器的平台，包括 Cloudflare、Netlify 和 Vercel 所提供的解決方案。
要在 Web Worker 中運行第三方腳本（避免阻塞主線程），請使用 Partytown 的 SvelteKit 集成。
選擇性加載
使用靜態 import 聲明導入的代碼將自動與頁面的其餘部分打包在一起。如果某段代碼僅在滿足特定條件時才需要，請使用動態 import(...) 形式來選擇性地延遲加載組件。
導航
預加載
您可以使用鏈接選項預先加載必要的代碼和數據來加快客户端導航。當您創建新的 SvelteKit 應用程序時，<body> 元素上是默認有配置的。
非必要數據
對於加載緩慢且不需要立即使用的數據，從 load 函數返回的對象可以包含 promise 而不是數據本身。對於服務端 load 函數，這將導致數據在導航（或初始頁面加載）後流式傳輸。
防止瀑布問題
最大的性能殺手之一是所謂的瀑布問題，即一系列按順序發出的請求。這可能發生在服務端或瀏覽器中。
- 當您的 HTML 請求 JS，然後請求 CSS，然後請求背景圖片和網絡字體時，可能會在瀏覽器中出現資源瀑布。SvelteKit 通過添加
modulepreload標籤或頭部，將為您解決這類問題，但您應該查看開發工具中的網絡標籤以檢查是否需要預加載其他資源。如果您使用網絡字體，請特別注意這一點，因為它們需要手動處理。 - 如果通用
load函數發起 API 調用來獲取當前用户，然後使用該響應中的詳細信息來獲取已保存項目的列表，然後使用該響應來獲取每個項目的詳細信息，瀏覽器最終將發出多個順序請求。這對性能來説是致命的，尤其是對於物理位置遠離您後端的用户。在可能的情況下使用服務端load函數來避免這個問題。 - 服務端
load函數也不能免疫瀑布問題（儘管它們的代價要小得多，因為它們很少涉及高延遲的往返）。例如，如果您查詢數據庫以獲取當前用户，然後使用該數據進行第二次查詢以獲取已保存項目的列表，使用帶有數據庫連接的單個查詢通常會更高效。
託管
為了最小化延遲，你的前端應該與後端位於同一數據中心。對於沒有中央後端的站點，許多 SvelteKit 適配器支持部署到 edge，這意味着從離用户最近的服務器處理每個用户的請求。這可以顯著減少加載時間。一些適配器甚至支持按路由配置部署。您還應該考慮從 CDN（通常是 edge 網絡）提供圖片服務 — 許多 SvelteKit 適配器的主機會自動完成這項工作。
確保您的主機使用 HTTP/2 或更新版本。Vite 的代碼分割創建了許多小文件以提高緩存能力，這會帶來出色的性能表現，但這建立在您的文件可以通過 HTTP/2 並行加載的前提下。
延伸閲讀
在大多數情況下，構建高性能的 SvelteKit 應用程序與構建任何高性能的 Web 應用程序是一樣的。您應該能夠將這些來自通用性能資源（如 Core Web Vitals）的信息應用到任何您構建的 Web 體驗中。
Svelte 中文文檔
點擊查看中文文檔：SvelteKit 性能
系統學習 Svelte，歡迎入手小冊《Svelte 開發指南》。語法篇、實戰篇、原理篇三大篇章帶你係統掌握 Svelte！
此外我還寫過 JavaScript 系列、TypeScript 系列、React 系列、Next.js 系列、冴羽答讀者問等 14 個系列文章， 全系列文章目錄：https://github.com/mqyqingfeng/Blog
歡迎圍觀我的“網頁版朋友圈”、加入“冴羽·成長陪伴社羣”，踏上“前端大佬成長之路”。
