最直接的方法是检查打包后的 bundle 文件中未使用的 export 是否被移除；若存在未引用却残留的导出，说明 Tree Shaking 未生效，可能因副作用、非 ES Module 语法或动态引用等问题。
最直接的方法是检查打包后的产物文件内容，看未使用的导出（export）是否真的被移除了。
查看最终生成的 bundle 文件
Tree Shaking 的效果体现在最终输出的 JS 文件中。你需要打开构建后生成的 main.js 或类似入口文件（如 dist/bundle.js），搜索那些本应被摇掉但你怀疑残留的函数或类名：
- 如果某个 export 的函数在代码中从未被 import 过，它在 bundle 中应该完全找不到
- 如果找到了，说明 Tree Shaking 没生效——可能因为该模块有副作用、用了非 ES Module 语法、或被其他地方意外引用
借助可视化工具分析依赖图
使用 webpack-bundle-analyzer 可以直观看到每个模块的大小和引用关系：
- 安装：npm install --save-dev webpack-bundle-analyzer
- 配置 webpack 的
plugins加入BundleAnalyzerPlugin - 运行分析命令后，浏览器会打开一个交互式页面，点击某个模块可查看其导出项是否全部被引用
- 若某模块体积明显偏大，且内部存在大量未调用的命名导出，就值得重点排查
检查模块是否符合 Tree Shaking 前提条件
Tree Shaking 不是自动生效的，需满足几个关键前提：
立即学习“Java免费学习笔记（深入）”；
- 源码必须使用 ES Module 语法（
export/import），不能是 CommonJS（module.exports/require） - 确保 package.json 中没有设置
"sideEffects": false误伤了真实副作用，或漏写了有副作用的文件（如 CSS、JSON、全局样式） - 避免动态
import()或字符串拼接的import，这类写法会让打包器保守保留整个模块 - 确认没有通过
window.xxx = xxx或其他方式将导出变量挂到全局，这会被视为“被使用”而无法摇掉
添加编译期提示辅助验证
有些工具能帮你发现潜在问题：
- 用 rollup-plugin-visualizer（Rollup 用户）或 source-map-explorer（通用）定位未使用代码
- 在 Webpack 中开启
optimization.usedExports: true，配合devtool: 'source-map'，再看 source map 对应源码是否标记了/* unused export xxx */ - 对关键工具函数加个无副作用的测试导入（比如只 import 一个函数），然后检查其余导出是否消失
不复杂但容易忽略的是：Tree Shaking 是基于静态分析的，只要代码里存在任何让打包器无法确定“未被使用”的写法，它就会放弃摇掉整个模块。
