什麼是 JavaScript 中的 Tree Shaking？

---

什麼是 Tree Shaking？

如果您是一位經驗豐富的 JavaScript 開發人員，您可能聽說過 Tree Shaking。這是一種常見的技術，用於從應用程式中移除未使用的程式碼，並且它還會移除應用程式中未使用的匯入。在這裡，“Tree Shaking”這個術語的引入，就像搖晃樹木一樣，去除程式碼中不必要的枝幹，並在最終的包中保留所需的程式碼。

基本上，Tree Shaking 用於消除無用或未使用的程式碼。

為什麼我們需要 Tree Shaking？

正如我們在本教程的前面部分看到的，Tree Shaking 用於從應用程式包中移除未使用的程式碼。使用 Tree Shaking 的主要原因是減小我們交付給使用者瀏覽器的 JavaScript 包的大小。如果包的大小更小，它在瀏覽器中載入的速度更快。此外，它需要更少的資料來下載瀏覽器中的包，從而提高應用程式的效能。

特別是在 Web 開發中，當開發依賴於大型動態資料的網站時，Tree Shaking 技術非常重要。如果您的 Web 應用程式非常大，但包含靜態 Web 頁面，則您不需要 Tree Shaking，但即使您的應用程式很小並且載入大量動態資料，您也需要 Tree Shaking 來移除額外的程式碼。

Tree Shaking 如何工作？

在本節中，我們將瞭解 Tree Shaking 在即時開發中是如何工作的。

讓我們透過一個簡單的示例來理解 Tree Shaking。

這裡，我們建立了三個不同的檔案，並根據檔名向這些檔案中添加了不同的 JavaScript 函式。

檔名 – sum.js

export function sum() {
   let array = [1, 2, 3, 4, 5];
   return array.reduce((a, b) => a + b, 0);
}

檔名 – factorial.js

export function factorial(n) {
   if (n === 0) {
      return 1;
   }
   return n * factorial(n - 1);
}

檔名 – multiply.js

export function multiply(a, b) {
   return a * b;
}

檔名 – index.js

import { sum } from './sum.js';
import { factorial } from './factorial.js';
import { multiply } from './multiply.js';
console.log(sum(2, 3));

在上面的示例中，我們從不同的檔案中匯出了 sum、factorial 和 multiply 函式。然後，我們在 index.js 檔案中匯入了所有三個函式。在這裡，我們只使用了 sum() 函式，但沒有使用 factorial() 或 multiply() 函式。因此，我們在 index.js 檔案中有一個未使用的匯入，我們需要將其移除。

在 ES5 中，我們使用 “require()” 從任何其他 JavaScript 檔案中匯入函式或模組。因此，我們可以根據需要有條件地匯入模組，如下所示。

let isSumRequire = true;
var sum;
var multiply;
if (isSumRequire) {
   sum = require('./sum');
} else {
   multiply = require('./multiply');
}

在這裡，基於條件，我們匯入模組，因此它會根據需要載入。

但在 ES6 中，我們不能像下面這樣有條件地匯入模組。

let isSumRequire = true;
if (isSumRequire) {
   import sum from './sum';
} else {
   import multiply from './multiply';
}

上面有條件匯入的程式碼將無法工作。因此，我們需要使用 JavaScript 打包器。

如何使用打包器進行 Tree Shaking？

正如我們在前面部分看到的，在 ES6 中，我們無法使用有條件匯入。因此，我們需要使用打包器，例如 webpack、Rollup、parcel 等。

首先，我們需要為 Tree Shaking 配置打包器。這包括將模式設定為 'production' 並新增最佳化設定以啟用 Tree Shaking。

例如，在 webpack 中，您可以使用以下程式碼。

module.exports = {
   mode: 'production',
   optimization: {
      usedExports: true,
   },
   // other configuration settings...
};

之後，使用者需要根據 ES6 格式匯入模組，並確保不使用 “require()” 方法進行匯入。

透過這種方式，開發人員可以使用打包器在 JavaScript 中啟用 Tree Shaking，這有助於透過減少 Web 瀏覽器上的載入時間來提高應用程式的效能。