什么是 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 浏览器上的加载时间来提高应用程序的性能。