如果您是一位經驗豐富的 JavaScript 開發人員，您可能聽說過 Tree Shaking。從應用程式中刪除未使用的程式碼是一種常見的技術，而且它也會從應用程式中刪除未使用的匯入。在這裡，透過搖晃樹、刪除不必要的程式碼分支並將所需的程式碼保留在最終套件中，引入了「搖樹」術語。
基本上，樹抖動用於消除無效或未使用的程式碼。
正如我們在教程的上述部分中所看到的，樹搖動用於從應用程式套件中刪除未使用的程式碼。使用 Tree Shaking 的主要原因是為了減少我們交付給使用者瀏覽器的 JavaScript 套件的大小。如果套件的大小較小，則在瀏覽器上載入速度會更快。此外，在網頁瀏覽器中下載捆綁包所需的資料更少，從而提高了應用程式的效能。
尤其是，在開發依賴大型動態資料的網站時，tree-shaking 技術在 Web 開發中非常重要。如果您的網路應用程式非常大，但包含靜態網頁，則不需要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 捆綁器。
正如我們在上面部分所看到的，在 ES6 中，我們不能使用條件導入。因此，我們需要使用 webpack、Rollup、parcel 等打包器。
首先，我們需要設定用於樹搖動的捆綁器。它涉及將模式設為“生產”並添加最佳化設定以啟用樹搖動。
例如，在webpack中，您可以使用以下程式碼。
module.exports = {
mode: 'production',
optimization: {
usedExports: true,
},
// other configuration settings...
};
之後，使用者需要依照ES6格式匯入模組，並且需要確保沒有使用‘require()’方法來匯入。
透過這種方式，開發人員可以使用捆綁器在 JavaScript 中啟用樹搖動，這有助於透過減少 Web 瀏覽器上的載入時間來提高應用程式的效能。
以上是JavaScript 中的樹抖動是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
