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 正常工作，需要满足以下几个条件：
立即学习“Java免费学习笔记（深入）”；
- 使用 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 虽然不能自动清除所有冗余代码，但在现代前端工程中，配合正确的模块规范和构建配置，能显著减少最终产物体积。关键是写代码时保持模块的“纯净”和“可静态分析”。
