动态属性访问（如 obj[key]）导致 tree shaking 失效，因其阻碍打包器静态分析；应改用字面量键+条件分支、静态映射表或显式键列表等可分析方式，并借助打包器诊断工具验证修复效果。
动态属性名（如 obj[variable] 或 obj[func()]）会让 JavaScript 打包器（如 Webpack、Rollup、Vite）无法静态分析对象结构，从而无法安全地移除未使用的属性或方法，导致 Tree Shaking 失效。排查这类问题，核心是定位“哪些动态访问阻断了摇树”，再用静态可分析的方式替代。
识别动态属性访问的常见模式
以下写法都会让打包器放弃对对象属性的死代码判断：
-
obj[key]（key是变量、参数、函数返回值等非字面量） -
obj[CONFIG_NAME]（即使CONFIG_NAME是 const，若其值来自外部或计算得出，仍可能被保守处理） -
obj[someVar.toUpperCase()]、obj[getPropName()] - 用
Object.keys(obj).forEach(key => obj[key])遍历并访问——整个对象被视为“全部被读取”
使用构建工具的摇树诊断能力
开启打包器的“usedExports”或“formers”相关提示，辅助定位：
-
Webpack：启用
optimization.providedExports: true+optimization.usedExports: true，再配合stats: "verbose"查看模块导出是否被标记为used；也可用 hints 或插件webpack-bundle-analyzer结合—display-used-exports观察哪些导出未被标记为 “unused” 却没被剔除 -
Rollup：默认开启强摇树，可通过
treeshake: { log: true }输出为何保留某段代码（例如日志出现MISSING_GLOBAL或UNKNOWN_IDENTIFIER往往暗示动态访问干扰了分析） -
Vite（基于 Rollup）：在
vite.config.ts中配置build.rollupOptions.treeshake = { log: true }，运行vite build --debug查看 treeshaking trace
将动态访问转为静态可分析形式
目标是让属性名在编译期可确定。常用策略：
-
用字面量键 + 条件分支替代：
obj[actionType]if (actionType === 'save') obj.save();<br>else if (actionType === 'load') obj.load();
-
用映射表 + 字面量 key 查找（需确保映射本身是静态的）：
const handlers = { save: obj.save, load: obj.load };<br>handlers[actionType]?.(); // actionType 必须是有限枚举，否则仍不安全
更稳妥：定义type ActionType = 'save' | 'load';并让actionType: ActionType，TypeScript 类型+字面量联合类型能帮 Rollup 做更准的控制流分析 -
避免遍历导出对象：不要对具名导出的对象做
Object.keys(exports).map(...)；改用显式列表：['methodA', 'methodB'].forEach(key => exports[key]())—— 虽仍含动态访问，但 key 是字面量数组，多数现代打包器可推断
验证修复是否生效
最直接方式：修改代码后重新构建，检查产物中对应未使用方法是否消失：
- 搜索打包后文件（如
dist/index.js），确认本应被删掉的方法体（函数名、字符串字面量、逻辑块）是否还存在 - 对比前后
gzip后体积变化（小幅度下降可能说明成功删掉若干方法） - 用
rollup-plugin-visualizer或source-map-explorer查看具体哪些符号被保留，并点击溯源到源码行——若发现某方法因“被obj[xxx]访问”而保留，就定位到了根因
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
