什么是 JavaScript 中的 tree shaking？

什么是 Tree Shaking？

如果你是一位经验丰富的 JavaScript 开发者，你可能会听说过 tree shaking。这是一种将未使用的代码从应用程序中删除并删除应用程序中未使用的导入的常见技术。这里，“Tree shaking”一词是通过摇动树来引入的，删除代码的不必要分支，保留所需的代码在最终的打包结果中。

基本上，Tree shaking 用于消除无用的或未使用的代码。

为什么需要 Tree Shaking？

正如我们在教程的前部分所看到的，Tree shaking 用于从应用程序捆绑包中删除未使用的代码。使用 tree-shaking 的主要原因是减小我们向用户浏览器传递的 JavaScript 捆绑包的大小。如果捆绑包大小更小，则在浏览器上加载得更快。此外，下载捆绑包所需的数据更少，这可以提高应用程序的性能。

特别是在开发依赖大量动态数据的网站时，树摇技术在 Web 开发中非常重要。如果您的 Web 应用程序非常大但包含静态 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));

在上面的示例中，我们从不同的文件中导出了 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，从而通过减少网络浏览器上的加载时间来提高应用程序的性能。