什么是javascript Tree Shaking_它如何减少代码体积？

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 是否生效

最直接的方式是查看构建产物源码或依赖图：

吐司AI

超多功能的免费在线生图网站！拥有全网更齐全的模型库，0门槛使用！

325

查看详情

立即学习“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_它如何减少代码体积？的详细内容，更多请关注php中文网其它相关文章！