JavaScript 中的樹抖動是什麼？

什麼是 Tree Shaking？

如果您是一位經驗豐富的 JavaScript 開發人員，您可能聽說過 Tree Shaking。從應用程式中刪除未使用的程式碼是一種常見的技術，而且它也會從應用程式中刪除未使用的匯入。在這裡，透過搖晃樹、刪除不必要的程式碼分支並將所需的程式碼保留在最終套件中，引入了「搖樹」術語。

基本上，樹抖動用於消除無效或未使用的程式碼。

為什麼我們需要 Tree Shaking？

正如我們在教程的上述部分中所看到的，樹搖動用於從應用程式套件中刪除未使用的程式碼。使用 Tree Shaking 的主要原因是為了減少我們交付給使用者瀏覽器的 JavaScript 套件的大小。如果套件的大小較小，則在瀏覽器上載入速度會更快。此外，在網頁瀏覽器中下載捆綁包所需的資料更少，從而提高了應用程式的效能。

尤其是，在開發依賴大型動態資料的網站時，tree-shaking 技術在 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));

在上面的範例中，我們從不同的檔案中導出了求和、階乘和乘法函數。之後，我們在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 捆綁器。

如何使用 Bundlers 進行 Tree Shaking？

正如我們在上面部分所看到的，在 ES6 中，我們不能使用條件導入。因此，我們需要使用 webpack、Rollup、parcel 等打包器。

首先，我們需要設定用於樹搖動的捆綁器。它涉及將模式設為“生產”並添加最佳化設定以啟用樹搖動。

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

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

之後，使用者需要依照ES6格式匯入模組，並且需要確保沒有使用‘require()’方法來匯入。

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

以上是JavaScript 中的樹抖動是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！