Tree Shaking 能检测并剔除未使用的 ES6 导出变量,但要求使用 export/import 语法、构建工具开启优化,且避免动态引用和副作用;CommonJS 不支持,需配合配置与工具验证。

Tree Shaking 能检测未使用的导出变量,但前提是代码必须满足特定条件——使用 ES6 模块语法(export/import),且构建工具(如 Webpack、Rollup、Vite)开启相应优化。它本身不是运行时检测机制,而是在打包阶段通过静态分析识别并剔除“未被引用的导出”。
确保使用 ES 模块语法
CommonJS(module.exports/require)无法被 Tree Shaking 分析,因为其导入导出是动态的。只有 export 和 import 才支持静态依赖图构建。
- ✅ 正确:
export const utils = { foo() {} };或export function helper() {} - ❌ 无效:
module.exports = { helper: function() {} };—— 不会被 shake
避免动态引用或副作用干扰
如果一个导出被间接引用(如通过字符串拼接、计算属性名访问),或模块有顶层副作用(如直接执行的函数调用、全局赋值),Tree Shaking 可能保守保留整个模块。
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式,或要求按照代码注释规范处理 Java 文件时,使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则,并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括:补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
- 避免:
const key = 'helper'; module[key]();→ 工具无法确定是否用到helper - 标记无副作用:
"sideEffects": false(package.json)或"sideEffects": ["*.css"],告诉打包器哪些文件可安全剔除
借助工具验证是否生效
实际检测未使用导出,不能靠肉眼,需结合构建产物分析:
立即学习“Java免费学习笔记(深入)”;
-
Webpack:启用
optimization.usedExports: true,再配合stats: "usedExports"查看打包报告中哪些 export 标记为unused export -
Vite/Rollup:启用
build.rollupOptions.treeshake.moduleSideEffects: false,并查看生成的 bundle 源码或使用 rollup-plugin-visualizer 可视化依赖 -
源码级检查:在 IDE 中(如 VS Code + TypeScript 插件),未被任何
import引用的export常被标灰或提示“unresolved”,但这只是编辑器提示,不代表打包时一定被剔除
写法建议提升可 shake 性
让导出更“独立”,便于静态分析:
- 用命名导出代替默认导出对象:
export const a = 1; export const b = 2;比export default { a: 1, b: 2 };更易按需剔除 - 避免在导出语句中包裹复杂逻辑:
export const value = someFunction();若someFunction有副作用,整个导出可能保留在 bundle 中 - 拆分大模块:把工具函数分散到独立小文件中,每个文件只导出一两个功能,提高粒度控制精度

















