Tree Shaking 是一种基于 ES6 模块静态分析的构建优化技术，通过标记并剔除未使用的代码来减小打包体积；它依赖于静态的 import/export 语法，不支持 CommonJS 动态模块，在生产模式下结合 Terser 等压缩工具生效，且需在 package.json 中配置 sideEffects 以帮助构建工具判断代码是否可安全删除。
Tree Shaking 并不是 JavaScript 本身的特性，而是一种在构建阶段通过静态分析消除未使用代码（dead code）的优化技术，常用于现代前端构建工具如 Webpack、Rollup 和 Vite 中。它的核心目标是减小打包体积，只将实际用到的代码包含进最终的输出文件中。
1. 基于 ES6 模块的静态结构
Tree Shaking 能够工作的前提是使用 ES6 模块（import/export），因为它们具有以下特点：
ES6 模块是静态的：模块依赖关系在编译时就已确定，不能动态改变（如 import 在 if 中）可以进行静态分析：构建工具可以在不运行代码的情况下分析出哪些 export 被 import 了如果某个 export 没有被任何模块引用，就可以安全地移除
注意：CommonJS 模块（require/module.exports）是动态的，无法在编译时确定依赖关系，因此不支持 Tree Shaking。
2. 标记与剔除未使用代码
构建流程通常分为两个阶段：
立即学习“Java免费学习笔记（深入）”；
标记（Mark）：从入口文件开始，顺着 import 关系图遍历所有被使用的模块和导出函数/变量剔除（Sweep）：未被标记的代码被视为“死代码”，在最终打包时被排除
例如：
// math.jsexport const add = (a, b) => a + b;export const subtract = (a, b) => a - b;// main.jsimport { add } from './math.js';console.log(add(2, 3));
在这个例子中，subtract 函数没有被引入，因此在启用 Tree Shaking 的情况下，它不会被打包进最终结果中。
3. 构建工具的配合与副作用配置
即使使用了 ES6 模块，某些代码仍可能因为“副作用”而无法被安全删除。副作用指的是模块执行时除了导出值之外的操作，比如：
修改全局对象注册事件监听向 DOM 添加内容
为了帮助构建工具判断是否可以安全删除模块，package.json 中可以设置：
"sideEffects": false
表示该项目所有文件都没有副作用，可放心进行 Tree Shaking。如果有特例，也可以写成数组形式：
"sideEffects": ["./src/polyfill.js"]
4. 需要生产模式与压缩工具支持
Tree Shaking 通常只在生产构建中生效，原因如下：
开发模式下为了快速启动，通常跳过深度优化需要结合 UglifyJS、Terser 等压缩工具进一步删除未引用的函数和变量构建工具标记后，仍需压缩器真正移除代码
基本上就这些。Tree Shaking 不复杂但容易忽略细节，关键是用对模块系统并正确配置副作用。
以上就是JavaScript Tree Shaking死代码消除原理的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1532418.html
微信扫一扫 
支付宝扫一扫 
