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));

在上面的示例中，我们将求和、阶乘和乘法函数从不同的文件中导出。然后，我们在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浏览器的加载时间，提高应用程序的性能。