JavaScript 中的树抖动是什么？

什么是 Tree Shaking？

如果您是一位经验丰富的 JavaScript 开发人员，您可能听说过 Tree Shaking。从应用程序中删除未使用的代码是一种常见的技术，并且它还会从应用程序中删除未使用的导入。在这里，通过摇动树、删除不必要的代码分支并将所需的代码保留在最终包中，引入了“摇树”术语。

基本上，树抖动用于消除无效或未使用的代码。

为什么我们需要 Tree Shaking？

正如我们在教程的上述部分中所看到的，树摇动用于从应用程序包中删除未使用的代码。使用 Tree Shaking 的主要原因是为了减少我们交付给用户浏览器的 JavaScript 包的大小。如果包的大小较小，则在浏览器上加载速度会更快。此外，在网络浏览器中下载捆绑包所需的数据更少，从而提高了应用程序的性能。

尤其是，在开发依赖于大型动态数据的网站时，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 捆绑器。

如何使用 Bundlers 进行 Tree Shaking？

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

首先，我们需要配置用于树摇动的捆绑器。它涉及将模式设置为“生产”并添加优化设置以启用树摇动。

例如，在webpack中，您可以使用以下代码。

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

之后，用户需要按照ES6格式导入模块，并且需要确保没有使用‘require()’方法来导入。

通过这种方式，开发人员可以使用捆绑器在 JavaScript 中启用树摇动，这有助于通过减少 Web 浏览器上的加载时间来提高应用程序的性能。

以上就是JavaScript 中的树抖动是什么？的详细内容，更多请关注双恒网络其它相关文章！