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

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

标签： vue javascript es6 java js json 工具 路由 作用域 为什么