tree shaking 是 webpack(v2+)和 rollup 等工具通过静态分析移除未使用 es 模块导出代码的优化机制,依赖 es6 import/export 语法、无副作用声明、精准命名导入及正确构建配置。

Tree Shaking 是 Webpack(v2+)和 Rollup 等现代打包工具在构建时自动移除未使用 ES 模块导出代码的优化机制。它依赖于静态分析,**只对 ES6 模块语法(import/export)有效**,CommonJS(require/module.exports)无法被摇掉。
确保使用 ES 模块语法
这是 Tree Shaking 起作用的前提。如果项目中混用 require 或 Babel 将 import 编译成 CommonJS,摇树就会失效。
- 源码中统一用
export和import,避免export default+import xxx from的写法(虽可用,但命名导出更利于静态分析) - 检查 Babel 配置:禁用
@babel/preset-env对模块的转换,设置{"modules": false} - 确认
node_modules中的第三方库也输出 ES 模块(如 Lodash-es、date-fns),而非仅提供 CommonJS 版本
避免副作用干扰(Side Effects)
即使某个模块没被显式导入,若它有“副作用”(如执行全局赋值、修改原型、发起请求),打包工具会默认保留整个模块——这会阻碍 Tree Shaking。
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 在
package.json中明确声明:"sideEffects": false(表示所有文件都无副作用),或列出有副作用的文件(如["*.css", "src/init.js"]) - 避免在模块顶层写执行逻辑,例如:
console.log('init')、Array.prototype.myMethod = ... - 将副作用逻辑封装进函数,在真正调用时才触发
正确使用 import,避免“星号导入”破坏引用关系
import * as utils from './utils' 会让打包器无法判断具体用了哪些导出,从而保留全部内容。
- 优先使用命名导入:
import { debounce, throttle } from './utils' - 如必须用通配符,且确定只用其中几个,可配合
/*#__PURE__*/注释提示(部分工具支持) - 避免在
import后立刻解构赋值再丢弃,例如:const { unused } = await import('./mod')—— 动态导入 + 未使用仍可能保留模块
验证是否生效
别只靠感觉,要实际查看产物或依赖图:
- 用 Webpack 的
--mode production构建后,查看生成的 JS 文件大小变化 - 运行
webpack --stats=verbose或使用webpack-bundle-analyzer插件分析模块构成 - 在源码中故意导出一个大函数但不使用,构建后搜索该函数名,确认未出现在最终 bundle 中
Tree Shaking 不是魔法,它需要模块系统规范、构建配置配合与编码习惯共同支撑。只要保持 ES 模块、消除副作用、精准导入,未使用的代码自然会被剔除。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










