JavaScript构建优化_Tree Shaking原理

Tree Shaking 是一种通过静态分析消除未使用代码的优化技术，需使用 ES6 模块、production 模式及 sideEffects 配置，结合压缩工具删除无用代码。

Tree Shaking 是 JavaScript 构建优化中一个关键概念，主要用于消除项目中未使用的代码（dead code），从而减小打包体积。它并不是某种具体的工具，而是一种基于静态分析的优化机制，最早由 Rollup 引入，后来也被 Webpack 广泛支持。

Tree Shaking 的工作原理

Tree Shaking 能够工作的前提是模块系统必须是静态的、可静态分析的，也就是使用 ES6 模块语法（import/export）。这是因为 ES6 模块在编译时就确定了导入导出关系，而 CommonJS（require/module.exports）是动态的，无法在构建阶段准确判断哪些代码会被用到。

其核心流程如下：

• 从入口文件开始，构建整个依赖树
• 通过静态分析识别哪些函数、变量被实际引用
• 标记未被引用的导出（export）为“可摇掉”
• 结合压缩工具（如 Terser）删除这些未使用的代码

注意：Tree Shaking 只是“标记”无用代码，真正删除依赖压缩阶段。

实现 Tree Shaking 的前提条件

要让 Tree Shaking 正常工作，需要满足以下几个条件：

• 使用 ES6 模块语法：确保你的代码和依赖都使用 import 和 export，避免混用 require
• 设置 mode 为 production：Webpack 在 production 模式下默认开启压缩和 Tree Shaking
• 在 package.json 中声明 "sideEffects"：帮助打包工具识别哪些文件有副作用，不能被摇掉

例如，在 package.json 中可以这样配置：

"sideEffects": false

表示整个项目没有副作用，所有未引用的导出都可以安全删除。如果某些文件有副作用（如 CSS 引入、polyfill 注入），则需明确列出：

"sideEffects": [
  "./src/polyfill.js",
  "*.css"
]

常见问题与注意事项

即使配置正确，Tree Shaking 也不一定完全生效，原因可能包括：

• 第三方库使用 CommonJS 导出：比如很多 npm 包仍使用 module.exports，导致无法静态分析
• 引入方式不规范：如 import _ from 'lodash' 会引入整个库，应改为 import get from 'lodash/get'
• 存在副作用代码：即使函数没被调用，但如果模块执行时修改了全局环境，也不能被摇掉

建议在开发中尽量采用按需引入的方式，并优先选择提供 ESM 版本的库（如 lodash-es）。

验证 Tree Shaking 是否生效

可以通过以下方式检查：

• 使用 Webpack Bundle Analyzer 查看打包结果，确认未引用的模块是否被打包进去
• 在生产构建后查看输出代码，搜索未使用的函数名是否存在
• 在开发模式下临时关闭压缩，观察代码中标记为“unused”的注释（Terser 生成）

基本上就这些。Tree Shaking 虽然不能自动清除所有冗余代码，但在现代前端工程中，配合正确的模块规范和构建配置，能显著减少最终产物体积。关键是写代码时保持模块的“纯净”和“可静态分析”。