要避免对象属性访问导致 Tree Shaking 失效，需改用具名导出/导入、禁用破坏静态分析的 Babel 插件、使用 lodash-es 等 ESM 友好库，并配置 production 模式与 sideEffects。
要避免对象属性访问导致 Tree Shaking 失效，核心是切断“对象容器”这一中间层，让构建工具能直接、静态地看到函数与导入语句之间的明确绑定关系。对象访问（如 utils.methodA()）会让整个对象被当作一个不可拆分的单元保留下来，哪怕只用了一个方法。
改用具名导出和具名导入
这是最根本、最有效的做法。不要把多个函数塞进一个对象再默认导出，而是每个函数独立导出：
- ❌ 错误写法（阻断摇树）：
export default { methodA, methodB };import utils from './utils'; utils.methodA(); - ✅ 正确写法（支持摇树）：
export function methodA() { ... }export function methodB() { ... }import { methodA } from './utils'; methodA();
禁用可能破坏静态分析的转译插件
Babel 若启用 @babel/plugin-transform-modules-commonjs，会把 ES 模块转成 CommonJS，彻底摧毁 Tree Shaking 基础：
- 检查
.babelrc或babel.config.js，确保该插件未启用（尤其在生产构建中） - 使用
lodash-es替代lodash，它专为 ESM 设计，导出粒度细、无副作用 - 确认第三方库本身提供 ESM 入口（查看其
package.json中的exports或module字段）
验证是否真正生效
别靠猜测，直接看产物：
- 构建后打开
dist/assets/*.js，搜索未使用的函数名（如methodB），若存在且未被压缩混淆，说明没摇掉 - 临时加一行
import { unusedHelper } from './utils';，重新构建并对比包体积变化：无增长 → 已生效；有增长 → 该导出仍被保留 - 用
webpack-bundle-analyzer或 Vite 的build.report查看utils.js中哪些导出进入了最终 chunk
补充关键配置项
仅改写法还不够，需配套构建环境支持：
- 确保
mode: 'production'，否则 Webpack 不启用TerserPlugin真删代码 - 在项目根目录
package.json中声明"sideEffects": false（若所有文件纯计算）或精确列出有副作用的文件（如 CSS、polyfill） - 避免在模块顶层执行副作用逻辑（如修改
window、调 API、操作 DOM），否则整块模块会被保守保留
