Tree Shaking是模块打包工具中常用的优化手段，核心目标是在打包阶段识别并移除项目中没有被实际使用的代码，也就是常说的死代码，以此减小最终产物的体积，提升应用加载效率。它的实现和JavaScript的模块规范、打包工具的分析流程紧密相关，并不是所有项目都能默认生效。
Tree Shaking生效的核心前提
Tree Shaking能够正常工作，最核心的基础是项目使用ES模块规范编写代码。ES模块的import和export是静态的，也就是说模块的导入导出关系在代码编译阶段就可以确定，不会受到运行时逻辑的影响，这和CommonJS的动态require特性有本质区别。
如果项目中混用了CommonJS模块，或者使用了动态导入、动态导出逻辑，打包工具就无法在静态阶段确定哪些模块内容被使用，Tree Shaking就会失效。除此之外，还需要保证打包工具没有对模块做过度的副作用处理，否则也可能影响死代码的识别。
Tree Shaking的完整工作流程
1. 模块依赖图构建
Webpack这类打包工具首先会入口文件开始，递归解析所有的import语句，构建出完整的模块依赖关系图，记录每个模块的导入和导出内容，以及模块之间的依赖关联。
2. 标记未使用的导出内容
基于静态的模块依赖图，打包工具会遍历所有模块的导出内容，判断每个导出是否被其他模块实际引用。没有被任何地方引用的导出内容，就会被标记为未使用，也就是死代码。
这里需要注意，如果模块被判定为有副作用，那么即使它的导出没有被使用，打包工具也不会轻易移除整个模块，因为副作用可能会影响全局状态。Webpack中可以通过package.json的sideEffects字段声明模块是否有副作用，来辅助Tree Shaking的判断。
3. 压缩阶段剔除死代码
标记完成之后，Tree Shaking本身并不会直接删除代码，而是会把未使用的导出信息传递给后续的代码压缩阶段。常用的压缩工具如Terser会读取这些标记，在压缩过程中把被标记为未使用的代码直接移除，同时完成变量名简化、冗余代码合并等其他压缩操作。
实际配置示例
下面以Webpack为例，展示开启Tree Shaking的基础配置，首先需要在webpack.config.js中设置模式为生产模式，生产模式会默认开启很多优化包括Tree Shaking相关处理：
// webpack.config.js 基础配置
module.exports = {
mode: 'production', // 生产模式默认开启Tree Shaking相关优化
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: require('path').resolve(__dirname, 'dist')
},
optimization: {
usedExports: true, // 标记未被使用的导出，开发模式也可以手动开启这个配置查看标记效果
}
};然后在项目的package.json中声明模块的副作用情况，避免误判：
{
"name": "tree-shaking-demo",
"sideEffects": false, // 声明所有模块都没有副作用，都可以被Tree Shaking处理
// 如果有部分文件有副作用，比如全局样式文件，可以改成数组声明
// "sideEffects": ["*.css"]
}再来看一段示例代码，验证Tree Shaking的效果，首先编写工具模块：
// src/utils.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}入口文件只引入add函数，不使用subtract：
// src/index.js
import { add } from './utils.js';
console.log(add(1, 2));打包之后，压缩阶段的产物里就不会包含subtract函数的相关代码，这就是Tree Shaking生效的结果。
常见失效场景说明
- 使用CommonJS的
require导入模块，或者动态import()没有做静态处理，导致无法静态分析依赖。 - 模块被判定为有副作用，但是没有在
sideEffects中正确声明，导致整个模块没有被Tree Shaking处理。 - 导出的内容被赋值给全局变量，或者被第三方库动态引用，打包工具无法识别到使用情况，就不会标记为死代码。
- 使用了Babel等转译工具，把ES模块的
import/export转译成了CommonJS格式，破坏了静态分析的基础。
如果需要使用Babel又想保留Tree Shaking能力，可以在Babel配置中设置modules: false，让Babel不转译模块语法，交给Webpack处理：
{
"presets": [
["@babel/preset-env", {
"modules": false // 不转译ES模块语法，保留静态特性供Tree Shaking使用
}]
]
}
Tree_ShakingWebpack死代码消除ES模块模块打包修改时间：2026-06-03 01:57:28