JavaScript树摇与死代码消除是前端工程化中重要的代码优化手段，核心目标都是剔除项目中未被使用的冗余代码，减小最终打包产物的体积，提升页面加载效率。两者虽然最终效果相似，但实现逻辑和适用场景存在明显差异，需要开发者结合项目情况合理选择使用。
树摇的核心原理
树摇（Tree Shaking）是基于ES6模块的静态结构特性实现的优化方式。ES6模块使用import和export语法，模块的导入导出关系在代码编译阶段就可以确定，不会像CommonJS模块那样在运行时动态计算。构建工具可以遍历所有模块的依赖关系，标记出哪些导出成员被实际引用，未被引用的导出内容就会被标记为冗余，最终在打包阶段剔除。
需要注意的是，树摇只能处理ES6模块语法的代码，如果项目中使用CommonJS的require和module.exports，构建工具无法静态分析依赖关系，就无法触发树摇优化。
基础代码示例
假设我们有一个工具模块，定义了两个工具函数，但只有其中一个被使用：
// utils.js 工具模块
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
// main.js 入口文件
import { add } from './utils.js';
console.log(add(1, 2));
经过树摇优化后，subtract函数没有被引用，就不会出现在最终的打包产物中。
死代码消除的实现逻辑
死代码消除（Dead Code Elimination）的范围比树摇更广，它不仅可以处理未使用的模块导出，还能识别并剔除函数内部不会被执行的代码、永远为false的条件分支、未使用的变量等。死代码消除通常依赖构建工具内置的压缩插件实现，比如TerserWebpackPlugin，这类插件会在代码压缩阶段分析代码的执行逻辑，判断哪些代码永远不会被执行，直接将其删除。
死代码消除示例
以下代码中的冗余内容会被死代码消除处理：
function calculate() {
const unusedVar = '我是未使用的变量'; // 未使用的变量会被删除
if (false) { // 永远不成立的条件分支会被删除
console.log('这段不会执行');
}
return 1 + 2;
}
console.log(calculate());
最终打包产物中，unusedVar的定义和if(false)分支的内容都会被移除。
两者的核心差异
| 对比维度 | 树摇 | 死代码消除 |
|---|---|---|
| 分析阶段 | 依赖分析阶段 | 代码压缩阶段 |
| 处理对象 | 未使用的ES6模块导出 | 未使用的变量、不可达分支、冗余函数等 |
| 依赖前提 | 必须使用ES6模块语法 | 无特殊语法要求 |
| 实现工具 | 构建工具内置或插件支持 | 压缩插件（如Terser）实现 |
在构建工具中配置优化
Webpack中的配置方式
Webpack从2.0版本开始支持树摇，需要同时满足两个条件：一是模块使用ES6语法，二是将mode设置为production，production模式下Webpack会自动开启树摇和代码压缩（包含死代码消除）。如果需要在development模式下测试树摇效果，可以手动配置：
// webpack.config.js
module.exports = {
mode: 'development',
optimization: {
usedExports: true, // 标记被使用的导出，开启树摇
},
plugins: [
new TerserPlugin({ // 手动配置压缩插件，开启死代码消除
terserOptions: {
compress: {
dead_code: true, // 开启死代码消除
},
},
}),
],
};
Rollup中的配置方式
Rollup天生支持树摇，默认就会对ES6模块进行依赖分析，剔除未使用的导出，配置压缩插件即可同时开启死代码消除：
// rollup.config.js
import terser from '@rollup/plugin-terser';
export default {
input: 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'es',
},
plugins: [
terser({ // 开启代码压缩，包含死代码消除
compress: {
dead_code: true,
},
}),
],
};
注意事项
- 如果项目中使用了第三方库，需要确保第三方库提供ES6模块版本，否则无法触发树摇，比如很多库的package.json中会配置
module字段指向ES6版本入口。 - 避免在代码中写动态导入的副作用代码，比如
import './side-effect.js'这类没有导入任何成员的语句，构建工具会认为该模块有副作用，不会对其进行树摇优化。 - 死代码消除依赖代码的静态可分析性，如果代码中大量使用
eval、动态生成函数等特性，可能会导致部分死代码无法被正确识别删除。
树摇和死代码消除通常配合使用，树摇先剔除未使用的模块导出，死代码消除再处理模块内部的冗余逻辑，两者结合可以最大程度减小打包产物的体积。
JavaScript树摇死代码消除WebpackRollup修改时间：2026-07-02 11:54:39