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

Houssein Djirdeh

注意：由於 Glitch 已停止託管，本頁面的一或多個示範已無法運作。

如要進行本程式碼實驗室，請在第二個分頁中開啟這個 Glitch。

注意：本程式碼實驗室使用 Chrome 開發人員工具。如果尚未安裝 Chrome，請下載。

大多數網頁和應用程式都由許多不同部分組成。載入第一個網頁時，不要立即傳送構成應用程式的所有 JavaScript，而是將 JavaScript 分割成多個區塊，以提升網頁效能。

本程式碼實驗室說明如何使用程式碼分割，提升簡單應用程式的效能，以便排序三個數字。

評估

注意：這個應用程式使用 webpack，因此對程式碼所做的任何變更都會觸發新的建構作業，可能需要幾秒鐘才能完成。完成後，您應該會在應用程式中看到變更。

一如往常，在嘗試加入任何最佳化設定之前，請務必先評估網站成效。

1. 如要預覽網站，請按下「View App」，然後按下「Fullscreen」。
2. 按下「Control + Shift + J」鍵 (在 Mac 上為「Command + Option + J」鍵) 開啟開發人員工具。
3. 按一下 [網路] 分頁標籤。
4. 勾選「停用快取」核取方塊。
5. 重新載入應用程式。

在簡單的應用程式中，光是排序幾個數字，就需要 71.2 KB 的 JavaScript。這是怎麼回事？

在原始碼 (src/index.js) 中，lodash 程式庫會匯入並用於這個應用程式。Lodash 提供許多實用的公用函式，但這裡只使用套件中的單一方法。常見的錯誤是安裝及匯入整個第三方依附元件，但只使用其中一小部分。

最佳化

您可以透過幾種方式縮減套件大小：

1. 編寫自訂排序方法，而非匯入第三方程式庫
2. 使用內建的 Array.prototype.sort() 方法，依數字排序
3. 僅從 lodash 匯入 sortBy 方法，而非整個程式庫
4. 只有在使用者點選按鈕時，才下載排序程式碼

選項 1 和 2 是縮減套件大小的絕佳方法 (而且可能最適合實際應用程式)。不過，為了教學目的，本教學課程不會使用這些方法 😈。

注意：如要進一步瞭解如何移除未使用的程式碼，請參閱另一份指南。

選項 3 和 4 都有助於提升這個應用程式的效能。本程式碼實驗室的後續幾節將說明這些步驟。就像任何程式設計教學課程一樣，請務必嘗試自行編寫程式碼，而不是複製及貼上。

只匯入所需內容

您需要修改幾個檔案，只從 lodash 匯入單一方法。首先，請替換 package.json 中的這個依附元件：

"lodash": "^4.7.0",

改成下列內容：

"lodash.sortby": "^4.7.0",

現在，請在 src/index.js 中匯入這個特定模組：

import "./style.css";
import _ from "lodash";
import sortBy from "lodash.sortby";

並更新值的排序方式：

form.addEventListener("submit", e => {
  e.preventDefault();
  const values = [input1.valueAsNumber, input2.valueAsNumber, input3.valueAsNumber];
  const sortedValues = _.sortBy(values);
  const sortedValues = sortBy(values);

  results.innerHTML = `
    <h2>
      ${sortedValues}
    </h2>
  `
});

重新載入應用程式，開啟開發人員工具，然後再次查看「Network」(網路) 面板。

在這個應用程式中，只需少量工作，套件大小就縮減了 4 倍以上，但仍有改進空間。

程式碼分割

webpack 是目前最受歡迎的開放原始碼模組套件之一。簡單來說，它會將構成網頁應用程式的所有 JavaScript 模組 (以及其他資產)「bundle」成瀏覽器可讀取的靜態檔案。

這個應用程式使用的單一套件可以拆分為兩個獨立區塊：

• 一個負責構成初始路徑的程式碼
• 包含排序程式碼的次要區塊

使用動態匯入時，次要區塊可以延遲載入或視需要載入。在這個應用程式中，只有在使用者按下按鈕時，系統才會載入構成區塊的程式碼。

首先，請移除 src/index.js 中排序方法的頂層匯入：

import sortBy from "lodash.sortby";

並在按下按鈕時觸發的事件監聽器中匯入：

form.addEventListener("submit", e => {
  e.preventDefault();
  import('lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

import() 功能是提案 (目前處於 TC39 程序的第 3 階段) 的一部分，旨在加入動態匯入模組的功能。webpack 已加入這項支援，並遵循提案中規定的相同語法。

注意：如要進一步瞭解動態匯入的運作方式，請參閱這篇網路更新文章。

import() 會傳回 Promise，並在解析後提供所選模組，該模組會分割成獨立區塊。傳回模組後，module.default 會用於參照 lodash 提供的預設匯出。Promise 會與另一個 .then 鏈結，後者會呼叫 sortInput 方法，對三個輸入值進行排序。在 Promise 鏈結的結尾，catch() 用於處理因錯誤而拒絕 Promise 的情況。

注意：在正式版應用程式中，請務必妥善處理動態匯入錯誤。類似這裡使用的簡單快訊訊息，可能無法提供最佳使用者體驗，讓使用者知道發生錯誤。

注意：您可能會看到 Lint 錯誤訊息：bash Parsing error: 'import' and 'export' may only appear at the top level. 。這是因為動態匯入語法仍處於提案階段，尚未定案。雖然 webpack 已經支援，但 Glitch 使用的 ESLint (JavaScript linting 公用程式) 設定尚未更新，因此不包含這個語法，但仍可正常運作！

最後一項工作是在檔案結尾編寫 sortInput 方法。這個函式必須「傳回」一個函式，該函式會接收從 lodash.sortBy 匯入的方法。接著，巢狀函式可以排序三個輸入值並更新 DOM。

const sortInput = () => {
  return (sortBy) => {
    const values = [
      input1.valueAsNumber,
      input2.valueAsNumber,
      input3.valueAsNumber
    ];
    const sortedValues = sortBy(values);

    results.innerHTML = `
      <h2>
        ${sortedValues}
      </h2>
    `
  };
}

監控

最後一次重新載入應用程式，並再次密切注意「Network」(網路) 面板。應用程式載入時，只會下載一個小型初始套件。

按下按鈕排序輸入的數字後，系統會擷取並執行包含排序程式碼的區塊。

請注意，數字仍會排序！

結論

程式碼分割和延遲載入技術，可有效縮減應用程式的初始套件大小，直接加快網頁載入時間。不過，在應用程式中加入這項最佳化功能之前，請務必考量幾點重要事項。

延遲載入 UI

延遲載入特定程式碼模組時，請務必考量網路連線較弱的使用者體驗。當使用者提交動作時，分割並載入非常大的程式碼區塊，可能會讓應用程式看起來停止運作，因此建議顯示某種載入指標。

延遲載入第三方節點模組

在應用程式中延遲載入第三方依附元件不一定是最佳做法，這取決於您使用這些元件的位置。通常，第三方依附元件會分割成可快取的獨立 vendor 套件，因為這些元件不常更新。進一步瞭解 SplitChunksPlugin 如何協助您完成這項操作。

使用 JavaScript 架構延遲載入

許多使用 webpack 的熱門架構和程式庫都提供抽象化功能，讓延遲載入比在應用程式中間使用動態匯入更簡單。

• 使用 Angular 延遲載入模組
• 使用 React Router 拆分程式碼
• 使用 Vue Router 延遲載入

雖然瞭解動態匯入的運作方式很有幫助，但請一律使用框架/程式庫建議的方法，延遲載入特定模組。

預先載入和預先擷取

盡可能利用 <link rel="preload"> 或 <link rel="prefetch"> 等瀏覽器提示，嘗試更快載入重要模組。webpack 支援這兩種提示，方法是在匯入陳述式中使用神奇註解。詳情請參閱「預先載入重要區塊」指南。

延遲載入不只適用於程式碼

圖片可能占應用程式很大一部分。延遲載入不需捲動位置或裝置可視區域外的圖片，可加快網站速度。詳情請參閱 Lazysizes 指南。