Tree Shaking 原理：如何让 JavaScript 包体积减少高达50%？

JavaScript , , , ,

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 语句来管理模块间的依赖关系。这些语句的特点是：

  1. ** 静态性 ** ： import 和 export 只能在模块的顶层声明，不能在条件语句、循环或函数内部动态使用。
  2. ** 明确性 ** ：导入和导出的名称是明确的，不能是动态计算的字符串。

正是这种静态性，使得打包工具（如 Webpack、Rollup）可以在 ** 编译时 ** 就分析出哪些代码被 import 了，哪些没有。

** Tree Shaking 的大致过程如下： **

  1. ** 标记所有代码 ** ：打包工具首先会标记出项目中的所有代码，初始状态下，所有代码都被认为是“活代码”（可能被使用）。
  2. ** 从入口开始分析 ** ：打包工具从应用程序的入口文件（entry point）开始，分析其 import 语句，找到所有被直接依赖的模块。
  3. ** 遍历依赖图 ** ：接着，它会递归地遍历这些被依赖模块的 import 语句，构建一个完整的依赖图。
  4. ** 标记“活代码” ** ：在遍历过程中，所有被 import 语句实际引用的 export （函数、变量、类等）都被标记为“活代码”。
  5. ** 移除“死代码” ** ：在依赖图构建和标记完成后，那些从未被 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？

  1. ** 使用 ES6 模块语法 ** ：

    • 确保你的项目代码（以及你依赖的库）都使用 import 和 export 。
    • 在 Babel 等转译器配置中，避免将 ES6 模块转译成 CommonJS 模块（例如，Babel 的 @babel/preset-env 默认可能会这样做，需要配置 modules: false 来保留 ES6 模块语法供 Webpack 处理）。

  2. ** 指明副作用（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 完成）来控制。

  3. ** 避免引入整个库，按需引入 ** ：
    许多库（如 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';

  4. ** 编写纯模块 ** ：
    尽量编写无副作用的模块。函数应该是纯函数，模块的导入不应该改变全局状态。

  5. ** 使用生产模式打包 ** ：
    Webpack 等打包工具通常只在生产模式 ( mode: 'production' ) 下才会启用完整的 Tree Shaking
    和代码压缩优化。

  6. ** 检查你的打包结果 ** ：
    使用像 webpack-bundle-analyzer 这样的工具来可视化你的包内容，确认 Tree Shaking
    是否按预期工作，找出仍然可以优化的部分。

Tree Shaking 是一项强大的技术，它通过移除未使用的 JavaScript
代码，帮助我们显著减小应用的包体积更小的包意味着更快的加载速度、更优的性能和更好的用户体验。