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

Houssein Djirdeh

如要遵循本程式碼研究室，請在第二個分頁中開啟此 Glitch。

注意： 本程式碼研究室使用的是 Chrome 開發人員工具。如果尚未安裝 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>
  `
});

重新載入應用程式，開啟開發人員工具，然後查看「網路」面板 同樣地

這款應用程式的軟體包大小縮減了超過 4 倍，而且幾乎沒有 但仍然有進步空間

程式碼分割

webpack 是最熱門的開放原始碼之一 目前所用的模組組合套件簡單來說，此元件會「整合」所有 JavaScript 模組 ( 構成網頁應用程式的靜態檔案 。

這個應用程式中使用的單一軟體包可分成兩個不同的 區塊：

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

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

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

import sortBy from "lodash.sortby";

並在使用者按下按鈕時觸發的事件監聽器內匯入 API：

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

import() 功能是 提案 (目前處於階段) 39 程序的 3)，以納入動態匯入模組的功能。 webpack 已包含這項功能的支援，且遵循相同的語法 不會有任何影響

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

import() 會傳回承諾，並在解析時傳回所選值 模組提供了分割成幾個獨立區塊本單元結束後 傳回後，module.default 是用來參照預設值 匯出成 YAML 檔案將承諾的工作與另一個 .then 鏈結在一起。 會呼叫 sortInput 方法，為三個輸入值排序。結尾處 承諾鏈, .catch() 可用來處理承諾遭拒的情況 導致發生錯誤。

注意： 在正式版應用程式中，請一律妥善處理動態匯入錯誤。與這裡所用功能類似的簡單快訊訊息，未必能為使用者提供最佳體驗，也就無法讓使用者知道操作失敗。

注意： 您可能會看到程式碼檢查錯誤：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>
    `
  };
}

監控

最後一次重新載入應用程式，並密切留意網路 面板。應用程式一開始只會下載一個小型初始套件 載入。

按下按鈕以排序輸入號碼後，含有該區塊的區塊 排序程式碼會被擷取並執行

您會發現數字仍是經過排序的！

結論

程式碼分割和延遲載入是相當實用的實用技巧 應用程式的初始套件大小，直接導致 縮短網頁載入時間不過，您必須注意 才將這項最佳化納入您的應用程式。

延遲載入 UI

在延遲載入特定程式碼模組時，請務必考量 也可能會導致網路連線品質低落分割與 在使用者提交動作時，載入大量程式碼 因為應用程式可能已停止運作，請考慮顯示 某些排序的載入指標。

延遲載入第三方節點模組

在叢集中延遲載入第三方依附元件不一定是最佳做法 這取決於您使用的位置。通常是第三方 依附元件會分割成可以快取的單獨 vendor 套件，因為 則不會頻繁更新如想進一步瞭解 SplitChunksPlugin 可以 協助你完成這項作業

使用 JavaScript 架構延遲載入

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

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

雖然瞭解動態匯入的運作方式很有用，但建議您一律使用 方法，用於延遲載入特定模組。

預先載入及預先擷取

請盡可能運用瀏覽器提示，例如 <link rel="preload"> 或 <link rel="prefetch"> 嘗試載入重要模組 webpack 透過匯入神奇註解功能，提供兩種提示 聲明。詳細說明請參閱 預先載入重要區塊指南。

延遲載入更多程式碼

圖片可以構成應用程式的重要元素。請延遲載入 位於需捲動位置或裝置可視區域外的區塊，可加快網站速度。已讀 想進一步瞭解這項功能，請參閱 Lazysize 指南。