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

Houssein Djirdeh

如要按照本程式碼研究室的說明操作，請在第二個分頁中開啟這個 Glitch。

注意： 本程式碼研究室使用的是 Chrome 開發人員工具。如果尚未下載 Chrome，請先下載。

大部分網頁和應用程式由許多不同部分組成。只要將 JavaScript 分成多個區塊，就能改善網頁效能，而不是在載入第一個頁面後立即傳送構成應用程式的所有 JavaScript。

本程式碼研究室說明如何使用程式碼分割，改善可排序三個數字的簡單應用程式效能。

測量

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

一如以往，請務必先評估網站的成效，再嘗試加入任何最佳化設定。

1. 如要預覽網站，請按下「查看應用程式」，然後按下「全螢幕」圖示 。
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 模組 (及其他資產) 組合成靜態檔案，供瀏覽器讀取。

此應用程式中使用的單一套件可以分成兩個不同的區塊：

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

使用動態匯入時，次要區塊可以延遲載入或隨選載入。在這個應用程式中，只有在使用者按下按鈕時，才能載入組成區塊的程式碼。

請先移除 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() 會傳回承諾，並在解析後提供所選模組，並將其分割成單獨的區塊。傳回模組後，module.default 會用來參照 lodash 提供的預設匯出項目。承諾會與另一個呼叫 sortInput 方法的 .then 鏈結在一起，以便排序三個輸入值。承諾鏈的結束時，catch() 可用於處理承諾因錯誤而遭拒的情況。

注意： 在正式版應用程式中，請務必妥善處理動態匯入錯誤。如果只是單純的快訊訊息 (與此處用途類似)，可能就無法提供最佳的使用者體驗，讓使用者知道哪些操作失敗。

注意： 由於動態匯入語法仍在提案階段，而尚未完成，因此系統會顯示 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 指南。