面对ClawBot检测到前端项目打包体积过大时，不必慌张——这通常源于Tree Shaking（模块摇树）未正确启用或配置不到位。下面这套完整的优化方案，涵盖从生产模式检查到第三方库ESM支持的全程链路，能帮你精准定位体积膨胀的根源。
先明确一个基础事实：Tree Shaking仅在生产环境下生效，并且高度依赖ES模块的静态结构以及无副作用声明。如果你的ClawBot集成了Webpack或Vite，就必须确保构建流程运行在生产模式，同时语法和配置也不能出现偏差。
一、开启生产模式并验证Tree Shaking基础条件
第一步，确认ClawBot构建命令是否使用了生产模式。例如执行 clawbot build --mode production 或等效指令，否则Tree Shaking根本不会启动。
第二步，检查项目所有源码（包括第三方库的引用）是否统一采用 import/export 语法。这一点至关重要——严禁混用 require 或 module.exports，否则模块的静态结构会被破坏。
第三步，在 package.json 根目录下添加 "sideEffects": false 字段，显式声明整个项目没有顶层副作用。如果项目中含有CSS、字体、全局polyfill等带副作用的模块，不能简单设为 true，而应列出具体路径，比如 ["*.css", "src/polyfill.js"]。
二、配置构建工具侧的Tree Shaking支持项
ClawBot底层如果基于Webpack，需要手动核实关键配置项；如果是Vite，默认已启用，但某些写法会破坏摇树效果，需要规避。
Webpack用户：
找到 vue.config.js 或 webpack.config.js，确保 mode: 'production' 已设置，并且 optimization.usedExports 处于 true 状态。这两项是Webpack实现Tree Shaking的标准配置。
另外，检查Babel配置（例如 .babelrc），确保 presets 中包含 @babel/preset-env，并且它的 modules 选项设为 false，防止ES6模块被转译成CommonJS。这一步容易被忽略，但一旦转成CommonJS，Tree Shaking就彻底失效。
Vite用户：
在 vite.config.ts 中确认没有手动禁用 build.rollupOptions.treeshake，默认值 true 不可覆盖。同时注意避免在模块顶层写 console.log、localStorage.setItem 这类副作用操作，一旦存在，整个模块可能被Rollup保留。
三、重构代码以提升摇树有效性
Tree Shaking的效果与编码习惯直接相关。ClawBot能检测出未引用的导出，但对动态导入、赋值别名、运行时分支里的导出则无能为力。以下几个实战技巧非常有效：
1. 按需导入，避免贪图方便。 比如lodash，不要写 import _ from 'lodash'，这会把整个库引入。改为 import debounce from 'lodash/debounce'，只引入你需要的函数。
2. 避免中间变量赋值。 像 const { reactive } = Vue; export { reactive }; 这种写法会让Tree Shaking无法精确追踪导出来源。正确的做法是直接从源模块重导出：export { reactive } from 'vue'。
3. 组件库采用插件式导入。 对于Element Plus、Ant Design Vue这类组件库，配合 unplugin-vue-components 和 unplugin-auto-import，确保只注册实际使用到的组件和API。如果不配置，即便你未使用某个组件，它的代码也可能被打包进去。
四、利用ClawBot内置分析能力定位冗余来源
ClawBot自带的打包产物可视化功能非常实用，能帮你精准定位那些“摇不掉”的顽固模块，判断是配置遗漏还是代码本身问题。
执行 clawbot analyze --report 生成体积报告，重点关注 node_modules 中体积异常大的包，检查它的全部导出是否真的都被用到。
在报告中筛选被标记为 unused exports 的模块，然后定位它们在源码中的导入位置。如果发现 import * 或 export * 这类通配符语法，需格外小心——它们通常会阻止Tree Shaking进行精确丢弃。
对于体积排名前五的JS Chunk，可以用ClawBot的 --source-map 模式展开原始语句级引用链，验证某个函数是否因为间接调用路径而被错误保留。有时候一个看似无用的导出，会因为某个中间模块的引用链而被连带打包。
五、验证第三方库自身是否支持Tree Shaking
即使项目配置全部正确，如果第三方库本身没有采用ES模块发布，或者未标注 sideEffects，它的全部代码仍然会一股脑打包进来。ClawBot可以帮助你检查库的导出格式和字段声明。
打开 node_modules/xxx/package.json，检查是否存在 "module" 字段，并且指向一个ESM入口（比如 "module": "dist/index.esm.js"）。缺少该字段，说明库没有提供ESM版本，摇树效果必然打折。
再看这个库的 package.json 中是否有 "sideEffects": false 或精确路径数组。如果缺失，需要在本项目的 package.json 中，将该库的路径加入 sideEffects 白名单末尾（注意不是设为false，而是追加到数组里），这种方法虽然笨拙但有效。
对于完全不支持ESM的陈旧库（比如某些React旧组件），可以考虑用 patch-package 为其手动添加 module 字段和 sideEffects 声明，或者直接换用社区维护的ESM替代版本。