tree shaking 是否生效,最直接的验证方式是观察打包后产物中是否剔除未使用的代码,需满足es module语法、生产模式、不破坏引用关系等前提,并通过体积对比、可视化工具和源码检查综合确认。

Tree Shaking 是否生效,最直接的验证方式是观察打包后产物中是否真的剔除了未使用的代码。它不是靠“有没有写 import”来判断,而是依赖 ES Module 的静态结构 + 模块导出/导入关系 + 打包工具(如 Webpack、Rollup、Vite)的分析能力。测试体积变化需要结合构建配置、产物分析和代码控制变量来确认。
确保前提条件满足
Tree Shaking 不会自动生效,需满足几个关键前提:
-
使用 ES Module 语法:源码必须用
export/import,不能用 CommonJS(module.exports/require),否则 Webpack 等工具无法进行静态分析; -
启用生产模式:Webpack 需要
mode: 'production'(或手动开启optimization.usedExports: true和optimization.concatenateModules: true); -
不破坏引用关系:避免动态导入、
eval、try/catch中的require、或对模块对象的遍历访问(如Object.keys(mod)),这些会让工具保守地保留整个模块; -
第三方库需支持 ESM:检查
package.json中是否有"type": "module"或"exports"字段指向 ESM 入口,否则可能引入整包。
对比打包产物体积(最常用方法)
通过修改代码并比对构建产物大小,是最直观的测试手段:
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 在项目中创建一个含多个导出的工具模块,例如
utils.js:
export const a = () => console.log('a');<br>export const b = () => console.log('b');<br>export const c = () => console.log('c');- 在入口文件中只导入其中一个:
import { a } from './utils.js';<br>a();- 运行构建:
npm run build(确保是 production 模式); - 查看 dist 目录下主 JS 文件大小(如
main.xxxx.js); - 再改成导入全部:
import * as utils from './utils.js';或import { a, b, c } from './utils.js';,重新构建; - 对比两次产物体积 —— 如果 Tree Shaking 生效,前者应明显更小(尤其当
b和c含较大逻辑时)。
借助可视化工具分析模块构成
光看总大小不够精准,建议用分析工具定位具体被保留/剔除的代码:
-
Webpack:添加
stats: 'verbose'或使用webpack-bundle-analyzer插件,在构建后打开交互式图谱,搜索你的模块名,查看其导出项是否被标记为 “unused”; -
Vite:运行
vite build --report,生成dist/.vite/report.html,可展开查看每个模块的导入/导出及是否被引用; -
Rollup:启用
output.sourcemap: true并配合rollup-plugin-visualizer,生成模块依赖热力图。
检查生成代码是否真被删除
最终验证方式是看压缩后的代码里有没有残留:
- 构建后打开
dist/*.js(或先cat dist/*.js | terser --compress --mangle --format格式化); - 搜索未使用的导出名(如
b或c); - 如果完全搜不到对应函数体、字符串字面量或副作用调用,且没有
/* unused export b */类似注释(Terser 有时会加),说明已被彻底移除; - 注意:若函数有副作用(如直接修改全局、发请求、操作 DOM),即使没被调用,也可能被保留 —— 这是正确行为,不是 Tree Shaking 失效。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










