tree shaking 失效常见于对象属性访问导致的“假按需引入”：默认导出+属性访问、命名空间导入无访问、解构导入未使用项均可能阻止摇树；应改用具名导出/导入，确保静态引用明确，并通过构建产物验证。
对象属性访问是 Tree Shaking 失效的常见“隐形陷阱”——看似只用了某个方法，却因导入方式不当，导致整个模块被保留。排查关键不在于运行时行为，而在于静态引用关系是否清晰可分析。
识别“假按需引入”模式
以下写法看似按需，实则阻断 Tree Shaking：
-
默认导出 + 属性访问：
import utils from './utils'; utils.methodA();—— 即使只调用methodA，整个utils对象（含未用的methodB、methodC）仍会被保留 -
命名空间导入 + 未访问属性：
import * as utils from './utils'; console.log('loaded');—— 没有utils.xxx访问语句，部分工具会保守保留全部导出 -
解构但未使用：
import { methodA, methodB } from './utils'; methodA();——methodB虽未调用，但因出现在解构中，某些旧版工具可能无法安全剔除（现代 Rollup/Vite 通常能处理，但非绝对）
验证是否真被摇掉
不要依赖直觉，用构建产物说话：
- 构建后直接查看打包文件（如
dist/assets/index.xxxx.js），搜索目标函数名（如subtract）。若存在且未被压缩混淆，说明未被摇掉 - 在入口加一行
import { unusedHelper } from './utils';，重新构建并对比体积变化。无变化 → 已生效；体积增大 → 该导出未被移除，需回溯原因 - 用
webpack-bundle-analyzer或 Vite 的build.report查看模块内容明细，确认utils.js中哪些导出进入了最终 chunk
修复对象访问类残留
核心原则：让导入语句与实际使用完全对齐，消除“间接引用”：
- 把
export default { methodA, methodB }改为具名导出：export function methodA() {}、export function methodB() {} - 严格使用具名导入：
import { methodA } from './utils'，避免import utils from或import * as - 第三方库务必选 ESM 友好版本，例如用
lodash-es替代lodash，并确保 Babel 不启用@babel/plugin-transform-modules-commonjs - 检查
package.json中的sideEffects字段：若utils.js仅做纯计算、无 DOM 操作或全局修改，应声明为"sideEffects": false或精确列出有副作用的文件
本质上，Tree Shaking 不关心你“怎么用”，只认“怎么引”。只要导入语句能静态指向唯一标识符，它就能精准剪枝。对象属性访问模糊了这层映射，自然就成了残留高发区。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
