利用程式碼分割功能減少 JavaScript 酬載

Houssein Djirdeh

Jeremy Wagner

沒有人喜歡等待。 如果網站載入時間超過 3 秒，超過 50% 的使用者就會放棄瀏覽。

傳送大型 JavaScript 酬載會影響網站速度 。您不需要盡快將所有 JavaScript 傳送給使用者 載入應用程式的第一頁後，請將套件分割成 而且只在開頭傳送所需的資料

程式碼分割功能的優點為何？

程式碼分割是一種盡可能縮短啟動時間的技術。當我們需要在啟動時減少 JavaScript 時，就可以將這段重要期間的主執行緒工作降到最低，讓應用程式具備互動速度。

如果採用網站體驗核心指標，減少啟動時下載的 JavaScript 酬載，可以提升與下一個繪製 (INP) 互動 (INP) 的次數。背後的原因是，藉由釋放主執行緒，應用程式可以降低 JavaScript 剖析、編譯和執行相關的啟動成本，以更迅速地回應使用者輸入內容。

視網站的架構而定 (尤其是網站極度仰賴用戶端轉譯功能)，減少負責轉譯標記的 JavaScript 酬載大小，有助於提升最大內容繪製 (LCP) 時間。如果 LCP 資源延遲供瀏覽器探索，直到用戶端標記完成，或主執行緒過於忙碌而無法轉譯該 LCP 元素時，就會發生這種情況。這兩種情況都會延遲網頁的 LCP 時間。

測量

如果花費大量時間 在網頁上執行所有 JavaScript。

分割 JavaScript 組合，以在 使用者載入應用程式這可以減少需要用到的指令碼數量 進而加快網頁載入時間。

熱門模組套裝組合，例如 webpack 等工具。 地塊和 使用匯總功能 使用動態匯入的組合。 舉例來說，請考慮使用以下程式碼片段範例： 提交表單時觸發的 someFunction 方法。

import moduleA from "library";

form.addEventListener("submit", e => {
  e.preventDefault();
  someFunction();
});

const someFunction = () => {
  // uses moduleA
}

在此處，someFunction 會使用從特定程式庫匯入的模組。如果 這個模組目前未在其他位置使用，您可以修改程式碼區塊，改用 動態匯入，等到使用者提交表單時才能擷取。

form.addEventListener("submit", e => {
  e.preventDefault();
  import('library.moduleA')
    .then(module => module.default) // using the default export
    .then(() => someFunction())
    .catch(handleError());
});

const someFunction = () => {
    // uses moduleA
}

組成模組的程式碼不會納入初始套件中 現在延遲載入，或只在需要時才向使用者提供 提交表單。如要進一步改善網頁效能，請預先載入重要區塊，以便排定優先順序並加快擷取速度。

雖然上一個程式碼片段只是一個簡易範例， 依附元件在大型應用程式中並非常見模式。通常是第三 第三方依附元件會分割為可快取的獨立供應商套裝組合 因為這類更新並不常更新如要進一步瞭解 SplitChunksPlugin 則可 協助你完成這項作業

使用用戶端架構時，在路徑或元件層級進行分割，是 對應用程式各部分延遲載入是較簡單的做法。多個 常用的 Webpack 架構也提供抽象化機制，可製作延遲載入 會比自行探索設定更容易