Tree Shaking 原理:如何让 JavaScript 包体积减少高达50%?
JavaScript 包体积是一个持续受到关注的问题，巨大的 JS 文件会导致更长的加载时间、更高的解析和执行成本，最终影响用户体验。幸运的是，我们有像 Tree Shaking 这样的技术来帮助我们修剪掉那些“枯枝败叶”，显著减小最终的包体积。
什么是 Tree Shaking？
Tree Shaking，顾名思义，就像摇晃一棵树，把枯死的叶子（未使用的代码）摇下来。在 JavaScript 的世界里，它是一种 死代码消除 (Dead Code Elimination, DCE) 的形式，专门用于移除 JavaScript 上下文中未被引用的代码。
这个概念最初由 Rollup（一个 JavaScript 模块打包器）推广开来，现在已被 Webpack、Parcel 等主流打包工具广泛支持。其核心思想是：只打包你实际用到的代码。
Tree Shaking 如何工作？
Tree Shaking 的魔法主要依赖于 ES6 模块（ESM）的静态结构。ES6 模块使用 import 和 export 语句来管理模块间的依赖关系。这些语句的特点是：
- 静态性：import 和 export 只能在模块的顶层声明，不能在条件语句、循环或函数内部动态使用。
- 明确性：导入和导出的名称是明确的，不能是动态计算的字符串。
正是这种静态性，使得打包工具（如 Webpack、Rollup）可以在 编译时 就分析出哪些代码被 import 了，哪些没有。
Tree Shaking 的大致过程如下：
- 标记所有代码：打包工具首先会标记出项目中的所有代码，初始状态下，所有代码都被认为是“活代码”（可能被使用）。
- 从入口开始分析：打包工具从应用程序的入口文件（entry point）开始，分析其 import 语句，找到所有被直接依赖的模块。
- 遍历依赖图：接着，它会递归地遍历这些被依赖模块的 import 语句，构建一个完整的依赖图。
- 标记“活代码”：在遍历过程中，所有被 import 语句实际引用的 export（函数、变量、类等）都被标记为“活代码”。
- 移除“死代码”：在依赖图构建和标记完成后，那些从未被 import 引用过的 export，以及那些虽然被 export 但从未在任何地方被实际使用的代码，就被认为是“死代码”。在最终打包（通常是在生产模式下，结合代码压缩工具如 UglifyJS 或 Terser）时，这些死代码会被移除。
一个简单的例子：
在上述例子中，当打包工具处理 main.js 时，它会发现：
- foo 函数从 utils.js 中被导入并使用了。
- bar 函数虽然在 utils.js 中被导出了，但从未在 main.js 或其他任何地方被导入或使用。
- baz 函数也未被导入。
因此，在 Tree Shaking 之后，最终的打包文件将只包含 foo 函数的逻辑，而 bar 和 baz 函数的代码将被移除，从而减小了包体积。
为什么 ES6 模块是关键？
对比一下 CommonJS（Node.js 中常用的模块系统）：
CommonJS 的 require() 是动态的，可以在任何地方调用，导入的模块名也可以是变量。module.exports 也可以在运行时动态修改。这种动态性使得静态分析变得非常困难，打包工具无法在编译时准确判断哪些代码会被使用。
而 ES6 模块的静态特性，使得打包工具可以安全地进行分析和移除未使用代码。
如何有效利用 Tree Shaking？
- 使用 ES6 模块语法：
- 确保你的项目代码（以及你依赖的库）都使用 import 和 export。
- 在 Babel 等转译器配置中，避免将 ES6 模块转译成 CommonJS 模块（例如，Babel 的 @babel/preset-env 默认可能会这样做，需要配置 modules: false 来保留 ES6 模块语法供 Webpack 处理）。
- 指明副作用（Side Effects）：
有些模块在被导入时可能会产生“副作用”，例如修改全局变量、在 window 上挂载对象，或者仅仅是导入一个 CSS 文件（它会直接影响页面样式，即使没有显式使用其导出）。
- 对于库作者：在 package.json 中使用 sideEffects 字段来声明。
或者，如果库中有特定文件有副作用（如全局 CSS）：
// package.json
{
"name": "my-awesome-library",
"version": "1.0.0",
"sideEffects": [
"./src/polyfill.js",
"*.css"
]
}- 对于应用开发者：Webpack 在 production 模式下会自动进行 Tree Shaking。你可以通过 optimization.usedExports（标记未使用导出）和 optimization.minimize（实际移除，通常由 TerserPlugin 完成）来控制。
- 避免引入整个库，按需引入：
许多库（如 Lodash）提供了按需引入的方式。
- 不好：import _ from 'lodash'; console.log(_.get({a:1}, 'a')); (可能引入整个 Lodash)
- 好：import get from 'lodash/get'; console.log(get({a:1}, 'a')); (只引入 get 函数)
- 或者使用支持 Tree Shaking 的 lodash-es：import { get } from 'lodash-es';
- 编写纯模块：
尽量编写无副作用的模块。函数应该是纯函数，模块的导入不应该改变全局状态。 - 使用生产模式打包：
Webpack 等打包工具通常只在生产模式 (mode: 'production') 下才会启用完整的 Tree Shaking 和代码压缩优化。 - 检查你的打包结果：
使用像 webpack-bundle-analyzer 这样的工具来可视化你的包内容，确认 Tree Shaking 是否按预期工作，找出仍然可以优化的部分。
Tree Shaking 是一项强大的技术，它通过移除未使用的 JavaScript 代码，帮助我们显著减小应用的包体积更小的包意味着更快的加载速度、更优的性能和更好的用户体验。
