什么是 Tree Shaking？
如果您是一位经验丰富的 JavaScript 开发人员，您可能听说过 Tree Shaking。从应用程序中删除未使用的代码是一种常见的技术，并且它还会从应用程序中删除未使用的导入。在这里，通过摇动树、删除不必要的代码分支并将所需的代码保留在最终包中，引入了“摇树”术语。
基本上，树抖动用于消除无效或未使用的代码。
为什么我们需要 Tree Shaking？
正如我们在教程的上述部分中所看到的，树摇动用于从应用程序包中删除未使用的代码。使用 Tree Shaking 的主要原因是为了减少我们交付给用户浏览器的 JavaScript 包的大小。如果包的大小较小，则在浏览器上加载速度会更快。此外，在网络浏览器中下载捆绑包所需的数据更少，从而提高了应用程序的性能。
尤其是，在开发依赖于大型动态数据的网站时，tree-shaking 技术在 Web 开发中非常重要。如果您的Web应用程序非常大，但包含静态网页，则不需要tree-shaking，但即使您的应用程序很小并且加载大量动态数据，您也需要tree-shaking来删除额外的代码。
立即学习“Java免费学习笔记（深入）”；
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 浏览器上的加载时间来提高应用程序的性能。
