tree shaking 是静默移除未使用导出的构建过程,需通过查看 bundle 文件、构建报告(如 vite report、rollup 可视化)、配置 usedexports、静态检查工具或最小用例验证其效果。

Tree Shaking 本身不直接“告诉你”哪些代码被删了,它是在构建阶段静默移除未使用导出的自动化过程。要确认具体删了什么,得靠外部验证手段——不是看打包体积变小,而是查证“本该存在却没出现”的代码是否真的缺席了最终产物。
查看生成的 bundle 文件内容
这是最直接的方式:打开最终打包出的 JS 文件(如 dist/main.js),搜索你明确没引用但曾导出的函数或变量名。如果搜不到,且排除了压缩混淆干扰(比如用 source map 或未压缩版本验证),基本说明已被 Tree Shaking 移除。
- Webpack 用户可临时设
optimization.minimize: false关闭压缩,保留原始结构再搜索 - Vite 用户运行
vite build --report,会生成report.html,点开后能按模块查看哪些导出被标记为 “unused” - Rollup 可配置
output.sourcemap: true并结合rollup-plugin-visualizer查看依赖图中灰色(未引用)节点
借助构建工具的分析报告
现代打包器普遍支持可视化或结构化报告,能清晰标出“被引入但未使用”的导出项。
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- Webpack:加插件
webpack-bundle-analyzer,它展示的是模块体积分布,需配合usedExports: true配置才能反映 Tree Shaking 效果;更精准的是启用stats: { usedExports: true },然后在 stats.json 中搜索"usedExports"字段 - Next.js:构建后检查
.next/server/pages-manifest.json和build-manifest.json,再结合next build --debug输出的模块引用链 - 通用技巧:在源码中给待验证函数加唯一注释,如
// TREE-SHAKING-CANDIDATE: debounce,然后在 bundle 里搜这条注释是否存在
用静态检查工具辅助判断
有些工具能在构建前预判哪些导出大概率不会被保留。
-
eslint-plugin-tree-shaking:在开发时提示“export xxx is unused”,适合提前发现命名导出冗余问题 - TypeScript +
ts-unused-exports:扫描项目中声明了但从未 import 的命名导出 - 注意:这些是静态提示,不代表实际打包结果,仍需以最终 bundle 为准
写最小可验证用例反向验证
当怀疑某段代码没被摇掉,可以构造一个极简场景单独测试。
- 新建
test-utils.js,只写两个命名导出:export const keepMe = () => 1;和export const killMe = () => 2; - 在入口文件只
import { keepMe } from './test-utils',不引用killMe - 执行生产构建,检查输出文件是否含
killMe字符串 —— 若存在,说明 Tree Shaking 未生效,需回头检查模块语法、sideEffects 或构建模式
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










