Tree Shaking 的实际效果需结合构建日志与产物代码验证:启用 usedExports: true 可标记“unused harmony export”,搜索该提示确认未使用导出;最终以 dist 中函数定义是否消失为准,开发模式(如 Vite)默认不执行摇树,须用 production 构建验证。

Tree Shaking 的实际效果无法仅靠代码结构判断,必须结合构建工具(如 Webpack、Rollup、Vite)的编译日志或产物分析才能确认哪些模块/函数被真正移除。关键不是“有没有启用 Tree Shaking”,而是“它是否按预期工作”。
开启详细构建日志(以 Webpack 为例)
默认日志不显示摇树细节,需显式启用模块信息统计:
- 命令行添加 --stats=verbose 或 --stats=normal,推荐用 --stats=modules 查看模块依赖与引用状态
- 在 webpack.config.js 中配置:
stats: { modules: true, usedExports: true, optimizationBailout: true } - usedExports: true 是核心——它会标注每个模块中哪些导出被标记为 “used” 或 “unused”
识别日志中的关键信号
构建完成后,在终端输出中搜索以下关键词:
-
“unused harmony export”:说明该命名导出(如
export function helper() {})未被任何地方 import,已被标记为可删除 - “harmony export … is not used”:同上,更明确的未使用提示
- “side effects in initialization”:若某模块被标记为有副作用(如含顶层 console.log),即使无导入也会保留——需检查 package.json 的 "sideEffects" 字段是否合理
- 没有出现上述提示 ≠ 摇树失败,但若大量导出本应未被使用却没提示 “unused”,可能因动态 import、eval、或非静态导入导致摇树失效
配合产物源码验证(最可靠方式)
日志只是线索,最终要落到生成代码上:
- 构建后打开 dist/main.js(或对应 bundle),搜索疑似被摇掉的函数名(如
utils.formatDate) - 若该函数定义完全不存在,且其所在模块也未被引入(无
import … from './utils'痕迹),说明摇树生效 - 若函数定义还在,但未被调用,可能是:模块被其他路径间接引用;或用了
/*#__PURE__*/注释但未被识别;或构建工具版本较旧(Webpack
Vite 和 Rollup 的差异注意点
Vite 默认基于 Rollup,日志风格不同:
- Rollup 日志简洁,默认不输出 unused 提示,需加 --environment LOGGING:true 或插件(如
rollup-plugin-visualizer)辅助 - Vite 开发模式不执行 Tree Shaking(为热更新让步),必须运行 vite build --mode production 并查看 .vite/manifest.json 或产物内容
- Vite 2.9+ 支持 build.rollupOptions.treeshake: { moduleSideEffects: false } 强制忽略副作用,适合纯工具库场景
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











