Tree Shaking 是 Webpack 在 production 模式下通过静态分析 ES6 import/export 关系剔除未使用导出的优化机制，仅对 ESM 有效，需满足具名引入、sideEffects 正确声明等条件。
Webpack 的 Tree Shaking 是一种在构建阶段自动剔除未使用代码的优化机制，核心目标是减小最终打包体积。它不是运行时行为，也不依赖执行逻辑，而是靠静态分析 ES6 模块的 import/export 关系来判断哪些导出从未被引用，从而安全移除。
Tree Shaking 为什么只对 ES6 模块有效
ES6 模块的导入导出是静态声明（编译期即可确定），比如 import { foo } from './utils.js'，Webpack 能明确知道只用了 foo，而 bar 没被引用。但 CommonJS 的 require() 是动态的，可能受条件、变量影响，无法静态判定依赖路径和导出使用情况，所以不支持 Tree Shaking。
避免混用 require 和 import，尤其在同一个模块中Babel 配置中必须设 modules: false，否则会把 import 编译成 require，导致 Tree Shaking 失效第三方库若用 CommonJS 发布（如早期 lodash），需借助 lodash-es 等 ESM 版本才能摇掉未用方法
Webpack 中 Tree Shaking 的实际触发条件
它不是“开了就一定生效”的开关，需要同时满足几个前提：
mode 必须为 ‘production’：Webpack 5+ 默认开启，开发模式下即使配置了也不会执行剔除模块必须有明确的 export，并且 import 方式是具名或默认的静态引入：例如 import { debounce } from 'lodash' 可摇，import _ from 'lodash' 则整个包都会被打入package.json 中正确声明 "sideEffects"：值为 false 表示所有文件都无副作用（可安全摇），值为数组（如 ["*.css", "src/init.js"]）则列出不能被摇的文件；不写或设为 true 会禁用该模块的 Tree Shaking
如何验证 Tree Shaking 是否起作用
最直接的方式是看打包后代码里是否还存在未使用的导出声明，以及是否被标记为 /* unused harmony export xxx */：
立即学习“Java免费学习笔记（深入）”；
构建时加 --stats=verbose，再用 webpack-bundle-analyzer 查看模块构成，未引用的模块或导出通常不会出现在依赖图中检查 dist 目录下 bundle 文件源码，搜索 unused harmony export，若有说明 Webpack 已完成标记，后续由 Terser 删除对比启用前后 bundle 大小变化，尤其是引入大型工具库（如 moment、date-fns）时效果明显
常见导致 Tree Shaking 失效的情况
即使配置正确，以下写法也会让 Webpack “不敢”摇掉代码：
导出被间接引用：比如 export const x = 1，然后在另一个文件里 const obj = { x }，再 export default obj —— Webpack 可能因不确定 x 是否被外部访问而保留模块内有副作用（如修改全局变量、调用 console、操作 DOM）但未在 sideEffects 中声明，Webpack 会保守保留整块代码使用了动态 import()：这种异步导入无法静态分析具体用到哪个导出，相关模块整个保留循环引用中涉及导出使用，可能干扰标记逻辑，建议重构拆分
以上就是如何优化javascript打包_webpack的tree shaking原理是什么的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1544620.html
微信扫一扫 
支付宝扫一扫 
