树摇通过静态分析ES6模块移除未引用的导出，如未使用的subtract函数；死代码消除则由压缩工具清除不可达代码，如if(false)块；两者结合可显著减小打包体积。
JavaScript的树摇（Tree Shaking）和死代码消除是现代前端构建优化中的关键技术，主要用于减小打包后的文件体积，提升应用加载性能。它们的核心目标一致：移除项目中未使用的代码，但实现方式和适用场景略有不同。
什么是树摇（Tree Shaking）
树摇是一种在构建阶段移除未使用模块导出的技术，主要依赖于ES6模块系统的静态结构特性。由于import和export是静态声明，构建工具如Webpack、Rollup或Vite可以在编译时分析模块依赖关系，识别哪些函数或变量从未被引用。
例如：
/**
* 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));
立即学习“Java免费学习笔记（深入）”；
在这个例子中，subtract 函数没有被引入，因此在启用树摇的构建流程中，它将不会被打包进最终输出文件。
要使树摇生效，必须满足以下条件：
- 使用 ES6 模块语法（import/export），不能使用 CommonJS（require/module.exports）
- 构建工具需支持树摇（如 Rollup、Webpack 5+）
- 代码没有副作用，或正确标注副作用
死代码消除（Dead Code Elimination）
死代码消除是一种更广泛的优化手段，不仅限于模块级别，还包括函数内部、条件判断分支等不可达代码的清除。这类优化通常由打包器结合 JavaScript 压缩工具（如 Terser）完成。
常见示例包括：
if (false) {
console.log('这段永远不会执行');
}
const unused = '我是无用变量';
在生产构建中，Terser 会识别这些无法到达的逻辑并将其删除。与树摇不同，死代码消除可以在运行时逻辑层面起作用，不完全依赖模块系统。
它的优势在于：
- 处理局部变量、未调用函数、冗余条件判断
- 配合压缩工具自动执行，无需手动干预
- 适用于更多代码结构，包括非模块化代码
如何最大化利用这两种优化
为了让构建工具尽可能多地消除无用代码，开发者可以采取以下措施：
- 优先使用 ES6 模块语法组织代码
- 避免在模块顶层写有副作用的代码，或通过 package.json 的 "sideEffects" 字段明确声明
- 在 package.json 中设置 "sideEffects": false，帮助构建工具安全地移除未引用模块
- 使用生产模式打包（mode: 'production'），确保 Terser 等压缩工具启用
- 按需引入库功能，比如从 lodash-es 而非 lodash 引入函数
注意事项与限制
树摇不是万能的。如果模块本身存在副作用（如修改全局对象、注册事件监听），构建工具默认不会将其摇掉，除非明确标注。此外，动态导入（import()）或反射式引用（如 import * as lib from 'lib' 并遍历属性）会影响静态分析能力，可能导致本可删除的代码仍被保留。
基本上就这些。只要结构清晰、模块规范，现代工具链就能高效剔除冗余代码，让最终产物更轻量。
