Tree Shaking是一种基于ES模块静态分析的前端代码优化技术，它可以在打包过程中自动剔除项目中没有被实际使用的代码，也就是常说的死代码，从而减少最终输出的代码体积，提升项目的加载和运行效率。
Tree Shaking的核心前提
Tree Shaking能够生效的基础是项目使用ES_module的模块规范，也就是使用import和export语法来导入导出模块。因为ES模块的导入导出是静态的，在代码编译阶段就可以确定模块的依赖关系，而CommonJS的require和module.exports是动态的，无法在编译阶段确定依赖，所以Tree Shaking无法对CommonJS模块生效。
Tree Shaking的工作流程
Tree Shaking的整个工作过程可以分为三个核心步骤：
- 模块静态分析：打包工具在编译阶段会遍历所有模块的导入导出语句，构建出完整的模块依赖图，明确每个模块导出了哪些内容，以及这些内容被哪些其他模块引用。
- 标记未使用代码：根据依赖图，打包工具会标记出所有没有被任何模块引用的导出内容，这些内容就是需要被剔除的死代码。
- 代码剔除：在生成最终打包文件的时候，打包工具会把这些被标记的死代码从输出结果中移除，只保留实际被使用的代码。
Tree Shaking减少代码体积的示例
我们可以通过一个简单的示例来看Tree Shaking的实际效果，首先创建两个模块文件：
第一个是工具模块utils.js，导出两个工具函数：
// utils.js 工具模块
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
第二个是入口文件main.js，只导入使用add函数：
// main.js 入口文件
import { add } from './utils.js';
console.log(add(1, 2));
如果开启Tree Shaking，打包工具在静态分析的时候会发现subtract函数没有被任何模块引用，就会把它标记为死代码，最终打包结果中不会包含subtract函数的相关代码，相当于减少了这部分无用代码的体积。
Webpack中开启Tree Shaking的配置
在Webpack中，要正确开启Tree Shaking需要满足几个配置条件：
- 模块使用ES模块规范，也就是使用
import和export语法。 - 在
package.json中设置sideEffects字段，标记项目中的文件是否有副作用，没有副作用的文件可以被安全剔除未使用代码。 - 使用生产模式打包，或者手动开启代码压缩插件。
下面是package.json的配置示例：
{
"name": "tree-shaking-demo",
"sideEffects": false,
"scripts": {
"build": "webpack --mode production"
}
}
如果项目中有些文件是有副作用的，比如全局样式文件、polyfill文件，可以把sideEffects设置为数组，列出这些有副作用的文件路径：
{
"sideEffects": [
"*.css",
"./src/polyfill.js"
]
}
Tree Shaking的注意事项
在实际使用Tree Shaking的时候，有几个常见的注意点：
- 避免使用动态导入的模块做Tree Shaking，动态导入的模块依赖无法在编译阶段确定，会导致Tree Shaking失效。
- 不要在导出模块中使用副作用代码，比如导出的时候直接执行某些操作，会导致模块被标记为有副作用，无法被Tree Shaking优化。
- 如果使用了Babel转译代码，要确保Babel没有把ES模块转换成CommonJS模块，否则Tree Shaking会失效，可以在Babel配置中设置
modules: false。
Tree Shaking作为前端打包阶段的重要优化手段，合理使用可以显著减少项目的最终代码体积，尤其是在引入大型第三方库的时候，只导入需要使用的部分，配合Tree Shaking可以剔除大量无用的库代码，提升项目的加载性能。
Tree_Shakingjavascript代码体积优化ES_module修改时间：2026-07-21 15:42:28