# 定义

“Tree-shaking”（摇树优化）是现代 JavaScript 模块打包工具（如 Webpack、Rollup 等）中的一种优化技术。

其主要原理是在构建过程中，通过静态分析模块的导入和导出，检测并消除未实际使用的代码。这就好比摇动一棵树，让无用的 “叶子”（未使用的代码）掉落。

例如，如果您有一个模块导出了多个函数，但在实际使用该模块的代码中只调用了其中的一部分函数，那么在打包时，未被调用的函数所对应的代码将不会被包含在最终的构建产物中。

# 优点

1. 减小生成的代码体积：去除未使用的代码，从而减少了最终文件的大小，提高了加载速度。
2. 优化性能：减少了不必要的代码执行和加载，提高了应用的性能。

# 实现

要实现有效的 Tree-shaking，通常需要满足以下条件：

1. 使用 ES6 模块语法（ import 和 export ）。
2. 确保模块的代码具有 “纯”（无副作用）的特性，即模块中的函数和操作不会产生超出其返回值或对外部可见的状态更改。

例如，假设有一个数学计算模块 mathModule.js ：

export function add(a, b) {

  return a + b;

}

export function subtract(a, b) {

  return a - b;

}

在另一个文件中，如果只使用了 add 函数：

import { add } from "./mathModule";

console.log(add(2, 3));

在打包时， subtract 函数的代码将通过 Tree-shaking 被去除。