Tree Shaking 不直接报错，但配置或代码问题会导致构建失败、功能异常或体积未减反增；需按现象→原因→定位→修复四步闭环排查：体积未减查 sideEffects 配置与顶层副作用；白屏/undefined 检查动态引用与 CommonJS；内联脚本需抽离为模块引入；警告则核查 ESM 解析与 babel 配置。
Tree Shaking 本身不直接抛出运行时报错，但配置或代码问题会引发构建失败、功能异常或体积未减反增等“隐性报错”。记法要抓现象→原因→定位线索→修复动作四步闭环，不用死背错误文本，而是建立条件反射。
一看体积没变小，甚至变大
说明代码没被摇掉，大概率是模块被误判为有副作用。
- 检查 package.json 中的
"sideEffects"：设为false却偷偷执行了localStorage.setItem、注入 CSS 或改写了Array.prototype；设为数组却漏写了"*.css"或"index.js"这类实际有副作用的入口 - 搜项目里有没有
import 'xxx.css'、import 'core-js'、console.log或window.xxx =这类顶层副作用语句 - 用
webpack --stats=verbose构建后查usedExports: false的模块——这些就是“本该删却留着”的嫌疑对象
二看页面白屏、方法 undefined
常见于函数被误删，尤其导出后没被 import，或被动态调用绕过静态分析。
- 确认是否用了
import * as xxx或require()（CommonJS）——Tree Shaking 对它们无效 - 检查函数是否只在字符串拼接、
eval、setTimeout('xxx()')或事件回调字符串中被引用（Webpack 看不到） - 临时在
webpack.config.js中关掉摇树：optimization: { usedExports: false }，如果问题消失，就坐实是 Tree Shaking 误删
三看 Rollup 打包后内联脚本失效
<script>console.log('hi')</script> 里的代码永远不参与 Tree Shaking。
- Rollup 只分析
import/export构成的模块图，HTML 内联脚本属于全局作用域，对它来说是黑盒 - 必须把逻辑抽成独立
.js文件，再用<script type="module" src="./main.js"></script>引入 - 哪怕写了
export function foo(){}在内联 script 里，浏览器也会直接报Unexpected token 'export'
四看 Webpack 构建警告 “Module not found” 或 “export not resolved”
多因 ESM 路径解析失败，导致依赖链中断，Tree Shaking 失去上下文。
- 检查
babel-preset-env是否配了{ modules: false }—— 必须禁用模块转换，否则 import/export 被转成 require，静态分析失效 - 确认第三方库是否提供真正的 ESM 入口（如
"module": "dist/xxx.esm.js"），而不是 UMD 或 CommonJS - Vue CLI 项目可用
vue inspect --mode production | grep -A5 sideEffects快速验配置
