跳至主要內容
SvelteKit最佳實務

效能

SvelteKit 開箱即用，已完成許多工作，讓您的應用程式盡可能高效能

  • 程式碼分割，只載入目前頁面所需的程式碼
  • 資源預載，避免「瀑布式」（檔案請求其他檔案）
  • 檔案雜湊，讓您的資源可以永久快取
  • 請求合併，將從不同伺服器 load 函式擷取的資料分組為單一 HTTP 請求
  • 平行載入，讓不同的通用 load 函式同時擷取資料
  • 資料內嵌，讓在伺服器渲染期間透過 fetch 發出的請求，可以在瀏覽器中重新播放，而無需發出新的請求
  • 保守式失效，只有在必要時才會重新執行 load 函式
  • 預先渲染（必要時可針對每個路由設定），讓沒有動態資料的頁面可以立即提供服務
  • 連結預載，讓用戶端導覽所需的資料和程式碼需求能及早預測

儘管如此，我們（目前）無法消除所有導致效能降低的原因。為了發揮最大的效能，您應該留意以下提示。

診斷問題

Google 的 PageSpeed Insights 和（用於更進階的分析）WebPageTest 是了解已部署至網際網路的網站效能特性的絕佳方法。

您的瀏覽器也包含用於分析網站的實用開發人員工具，無論是已部署還是在本機執行

請注意，您的網站在本機以 dev 模式執行時，行為會與您的生產應用程式不同，因此您應該在建置後，以預覽模式進行效能測試。

儀器化

如果您在瀏覽器的網路標籤中看到 API 呼叫耗費很長時間，而且您想了解原因，您可以考慮使用 OpenTelemetry 或 Server-Timing 標頭之類的工具來檢測您的後端。

最佳化資源

圖片

減少影像檔案的大小通常是您可以對網站效能進行的最有效變更之一。Svelte 提供了 @sveltejs/enhanced-img 套件，詳細資訊請參閱 圖片 頁面，以便更容易地執行此操作。此外，Lighthouse 有助於找出最嚴重的問題。

影片

影片檔案可能非常大，因此應特別注意確保它們已最佳化

  • 使用 Handbrake 之類的工具壓縮影片。考慮將影片轉換為網頁友善的格式，例如 .webm 或 .mp4。
  • 您可以使用 preload="none" 延遲載入位於下方的影片（但請注意，這會在使用者啟動播放時減慢播放速度）。
  • 使用 FFmpeg 之類的工具，從靜音影片中去除音訊軌。

字型

當使用者造訪頁面時，SvelteKit 會自動預載重要的 .js 和 .css 檔案，但預設情況下，它不會預載字型，因為這可能會導致下載不必要的檔案（例如 CSS 參考但目前頁面實際上未使用的字型權重）。話雖如此，正確預載字型可以顯著影響您的網站感受到的速度。在您的 handle hook 中，您可以呼叫 resolve 並使用包含您的字型的 preload 篩選器。

您可以透過子集化您的字型來減少字型檔案的大小。

減少程式碼大小

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，而 JS 請求 CSS，而 CSS 請求背景影像和網頁字型時，瀏覽器中可能會發生資源瀑布式。SvelteKit 主要會透過新增 modulepreload 標籤或標頭來解決這類問題，但您應該檢視開發人員工具中的網路標籤，以檢查是否需要預載其他資源。如果您使用網路字型，請特別注意這一點，因為它們需要手動處理。
  • 如果通用 load 函式發出 API 呼叫來擷取目前使用者，然後使用該回應中的詳細資訊來擷取已儲存項目的清單，然後使用該回應來擷取每個項目的詳細資訊，則瀏覽器最終會發出多個循序請求。這對效能而言是致命的，尤其是對於物理位置離您後端很遠的使用者。請盡可能使用 伺服器 load 函式來避免此問題。
  • 伺服器 load 函式也不能倖免於瀑布式（雖然它們的成本要低得多，因為它們很少涉及高延遲的往返）。例如，如果您查詢資料庫以取得目前使用者，然後使用該資料對已儲存項目的清單發出第二次查詢，則通常使用資料庫聯接發出單一查詢會更高效能。

託管

您的前端應與您的後端位於同一資料中心，以盡量減少延遲。對於沒有中央後端的網站，許多 SvelteKit 轉接器支援部署到邊緣，這表示從附近的伺服器處理每個使用者的請求。這可以顯著縮短載入時間。某些轉接器甚至支援設定每個路由的部署。您也應該考慮從 CDN (通常是邊緣網路) 提供圖片 - 許多 SvelteKit 轉接器的主機都會自動執行此操作。

確保您的主機使用 HTTP/2 或更新版本。Vite 的程式碼分割會建立許多小型檔案，以提高快取能力，從而實現出色的效能，但前提是您的檔案可以使用 HTTP/2 平行載入。

延伸閱讀

在大多數情況下，建置高效能的 SvelteKit 應用程式與建置任何高效能的 Web 應用程式相同。您應該能夠將一般效能資源（例如 核心網頁指標）中的資訊應用於您建置的任何 Web 體驗。

在 GitHub 上編輯此頁面

上一個 下一個
驗證