Tree Shaking 是构建时基于 ES 模块静态结构移除未使用导出的优化技术，依赖具名导入、字面量导出和无副作用声明，并需正确配置构建工具。
Tree Shaking 是一种在构建时（如使用 Webpack、Rollup 或 Vite）自动识别并移除 JavaScript 中未被引用、未被使用的代码（dead code）的优化技术。它不是运行时行为，也不依赖于压缩工具（如 Terser）的变量名混淆或删除，而是基于 ES 模块（import/export）的静态结构，在编译阶段就“摇掉”那些确定不会执行的分支。
它依赖 ES 模块的静态可分析性
CommonJS（require）是动态加载、运行时决定依赖关系，无法在构建前确认哪些导出没被用到；而 ES 模块的 import 和 export 语句必须是顶层的、静态的——这意味着打包工具能不执行代码，仅靠语法分析就能画出完整的模块依赖图和引用链。
只有具名导入（import { foo } from './utils.js'）才可能触发 Tree Shaking；默认导入（import utils from './utils.js'）若模块没有 export default 的显式标记，或存在副作用，往往无法安全剔除导出必须是字面量声明（export const a = 1、export function fn(){}），不能是动态赋值（export { something } 中的 something 若来自计算结果，会阻碍分析）如果一个模块里有副作用（比如直接执行了 console.log、修改全局变量、绑定事件等），即使没被 import，也可能被保留——可通过 /*#__PURE__*/ 注释或 package.json 中的 "sideEffects": false 显式声明无副作用
它不是删函数，而是删“未被连接的导出”
Tree Shaking 不是简单地检测“某个函数有没有被调用”，而是看：这个 export 是否出现在任何一条从入口文件出发的、可到达的 import 路径上。只要没被任何活的引用链触达，整个导出声明（包括其内部逻辑）就可能被剔除。
例如：你写了 export const unusedHelper = () => {...}，但项目中没有任何地方 import { unusedHelper } 或 import * as x 后用到它 → 它大概率被摇掉但如果你写了 export default () => {...}，又只用了 import xxx from './x' 却没调用 xxx，默认导出仍会被保留——因为 ES 模块规范要求默认导出必须执行（除非明确标记为 pure 或 sideEffects: false）类、对象字面量、箭头函数本身不会被“自动内联”，Tree Shaking 关注的是导出绑定（binding）是否存活，而不是函数体是否冗余
实际生效需要构建工具+正确配置
即使代码符合 ES 模块规范，若构建配置不当，Tree Shaking 也会失效：
立即学习“Java免费学习笔记（深入）”；
Webpack 需要 mode: 'production'（开启 optimization.usedExports 和 concatenateModules）确保 Babel 不把 import/export 编译成 require（禁用 @babel/preset-env 的 modules: 'commonjs'）第三方库若用了 CommonJS 或未标注 sideEffects，它的全部代码都可能被整包引入——建议优先选已做 ESM 发布且声明了 "type": "module" 或 "sideEffects": false 的库
基本上就这些。Tree Shaking 不复杂，但容易忽略模块格式、副作用声明和构建配置这三个关键点。写代码时保持导出粒度清晰、避免意外副作用，再配好工具链，它就会安静地帮你减小包体积。
以上就是JavaScript中的Tree Shaking是什么_它如何移除未使用的代码呢的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1542170.html
微信扫一扫 
支付宝扫一扫 
