Tree Shaking 是编译时静态优化，不生成覆盖率报告；可通过 Chrome DevTools Coverage 面板反向验证其效果，查看未执行代码是否与应剔除的死代码重合，结合 source map、构建分析和局限性认知综合评估。
Tree Shaking 是编译时的静态优化，它本身不生成“覆盖率报告”，但你可以通过 Chrome DevTools 的 Coverage 面板，直观看到哪些 JS/CSS 代码在当前页面运行中实际未被执行——这部分内容往往和 Tree Shaking 剔除的目标高度重合，尤其在已启用 Tree Shaking 的构建产物中。
用 Coverage 面板反向验证 Tree Shaking 效果
Coverage 不是替代 Tree Shaking 的工具，而是运行时视角的补充验证手段。它能帮你确认：打包后仍留在 bundle 中的代码，是否真的被用到了。
- 打开 Chrome DevTools → More Tools → Coverage
- 点击录制按钮（●），然后刷新页面或执行关键交互（如打开弹窗、切换路由）
- 停止录制后，Coverage 面板会列出所有加载的 JS/CSS 文件，并用颜色标注使用比例：绿色 = 已执行，红色 = 完全未执行
- 重点查看 main.js 或 vendor chunk 中大面积标红的函数、类、样式规则——这些很可能是本该被 Tree Shaking 移除却残留下来的“死代码”
结合源码映射定位未使用模块
如果构建时启用了 source map（如 webpack 的 devtool: 'source-map'），Coverage 可显示原始 ES 模块路径，而非压缩后的 bundle 行号。
Java Development Manual
下载
Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。 涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。 当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...
- 在 Sources 面板中展开对应文件，红色高亮部分即为未执行语句
- 例如：一个工具函数文件
utils.js导出了formatDate和parseQuery，但 Coverage 显示只有前者被绿色标记，后者全红 → 说明parseQuery虽未被 Tree Shaking 删除（可能因导出方式或副作用标记问题），但实际没调用 - 此时可回查 import 写法是否规范（必须用
import { formatDate }而非import * as utils），或检查package.json是否正确声明了"sideEffects": false
对比构建前后体积与 Coverage 数据
单看 Coverage 不能区分“未使用”是 Tree Shaking 失效，还是运行路径覆盖不全。需配合构建分析：
立即学习“Java免费学习笔记（深入）”；
- 用
webpack-bundle-analyzer查看打包产物结构，确认某模块是否已被剔除 - 再用 Coverage 查看剩余模块中各函数/样式的实际执行占比
- 若某模块在 bundle 中存在，但 Coverage 显示其 90% 以上为红色 → 很可能 Tree Shaking 未生效，或该模块被间接引用（如通过字符串 require、动态 import）导致无法静态分析
- 若模块已从 bundle 中消失，Coverage 自然不会显示它 —— 这才是 Tree Shaking 成功的直接体现
注意 Coverage 的局限性
Coverage 反映的是单次页面生命周期内的执行情况，不是全量逻辑覆盖：
- 未触发的错误分支、懒加载模块、条件渲染组件中的 JS/CSS，可能被误判为“未使用”
- 它无法识别编译时 dead code（比如
if (false) { ... }），这类由 Terser 在压缩阶段移除，Coverage 看不到原始代码 - Tree Shaking 处理的是 未被引用的导出，Coverage 检测的是 未被执行的语句，二者目标一致但机制不同，建议配合使用而非互相替代
