Tree Shaking 是构建时移除未使用 ES6 模块代码的优化技术，依赖其静态导入导出特性；CommonJS 因动态性不支持，且副作用、动态 import、间接引用等会导致失效，需配合代码分割与压缩协同优化。
Tree Shaking 是一种在构建时移除 JavaScript 中未使用代码的优化技术，它依赖于 ES6 模块的静态结构特性，只保留实际被引用的导出（export）和导入（import）部分，从而减小最终打包体积。
为什么 Tree Shaking 只对 ES6 模块有效
ES6 模块（import/export）在编译阶段就能确定依赖关系，是静态的；而 CommonJS（require/module.exports）是运行时动态加载的，无法在构建时准确判断哪些导出没被使用。因此 Webpack、Rollup 等工具只能对 ES6 模块做安全的“摇树”——把没被 import 的 export 彻底删掉。
写成 import { foo } from './utils.js'，Tree Shaking 才可能剔除 bar 和 baz如果写成 import * as utils from './utils.js' 或 require('./utils.js')，整个模块都会被保留即使某个函数内部没被调用，只要它被 export 并被其他地方 import 过，就不会被删
常见导致 Tree Shaking 失效的情况
即使用了 ES6 模块语法，以下情况也会让未使用代码“幸存”下来：
副作用（side effects）：模块里有顶层执行语句（如直接调用函数、修改全局变量），工具默认不敢删，需在 package.json 中显式声明 "sideEffects": false 或列出白名单动态 import() 表达式：如 import(`./${name}.js`)，路径不确定，无法静态分析，整个模块会被保留导出被间接引用：比如通过字符串属性访问 obj['someFunc']()，或赋值给变量再调用，工具无法追踪第三方库未启用 Tree Shaking 支持：有些库导出方式不规范（如 UMD 包裹、default 导出含大量逻辑），需配置别名或使用 es 版本（如 lodash-es）
如何验证 Tree Shaking 是否生效
最直接的方式是查看构建产物源码或依赖图：
立即学习“Java免费学习笔记（深入）”；
用 Webpack 的 stats: 'verbose' 或插件（如 webpack-bundle-analyzer）分析模块引用链检查打包后的文件中是否还存在明显未调用的函数或类定义对比开启/关闭 mode: 'production' 时的 bundle 大小变化（Tree Shaking 默认只在生产模式启用）在源码中临时注释掉某个 import，看打包体积是否明显下降
配合其他手段效果更佳
Tree Shaking 不是孤立的，常与以下技术协同工作：
Scope Hoisting（作用域提升）：将模块合并到一个函数作用域内，减少闭包开销，也便于进一步压缩Minification（代码压缩）：UglifyJS、Terser 在删除死代码后，还能压缩变量名、移除空格注释Code Splitting（代码分割）：按路由或功能拆分 chunk，让 Tree Shaking 在更小范围内生效，避免“一损俱损”按需引入组件库：如用 import Button from 'ant-design-vue/lib/button' 替代完整引入，本身就是手动 Tree Shaking
以上就是什么是javascript Tree Shaking_它如何减少代码体积？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1544223.html
微信扫一扫 
支付宝扫一扫 
