CodeBuddy能分析并优化前端打包体积，它基于Webpack或Vite的构建产物（如stats.json）静态扫描，定位最大体积模块、重复引入库及未使用导出项，并输出结构化报告。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您在使用CodeBuddy分析Webpack与Vite的构建配置，但发现其给出的差异解释、转换建议或优化提示与实际行为不一致，则可能是由于AI未充分结合项目上下文或配置语义边界模糊所致。以下是验证与提升其理解准确性的具体路径：
一、确认CODEBUDDY.md中已声明构建工具栈与版本约束
CodeBuddy依赖项目快照识别技术栈特征，若未明确标注构建工具类型及版本范围，AI将默认采用通用模式匹配，易导致loader/plugin机制误判或HMR行为归因偏差。该文件需显式声明如“本项目使用Webpack 5.90+，启用module federation；Vite 5.2+用于独立微前端子应用”等语义锚点。
1、打开项目根目录，检查CODEBUDDY.md是否存在且含构建工具声明段落。
2、若缺失，手动添加“构建系统”章节，逐行列出主构建工具、辅助构建工具、对应版本号及关键插件（如webpack-bundle-analyzer、vite-plugin-react-swc）。
3、在声明中注明特殊配置意图，例如：“css.code-splitting设为false系因CDN强制统一加载CSS，非性能疏忽”。
二、触发工程理解智能体Plus执行跨配置文件语义对齐
CodeBuddy默认仅扫描单文件语法结构，而Webpack与Vite的配置本质是多文件协同契约（如vite.config.ts调用defineConfig，webpack.config.js依赖merge）。必须强制AI重建跨文件调用图谱，使其识别config间依赖链与导出契约。
1、在CodeBuddy对话框输入：“请基于/src/vite.config.ts、/webpack.config.js、/vue.config.js三文件重建构建配置语义图谱，标注所有函数调用、对象合并与环境变量注入点。”
2、等待状态栏显示“Build Config Graph: Ready (3 files linked)”后，立即追问：“对比vite.config.ts中build.rollupOptions与webpack.config.js中optimization.splitChunks的等效性，并指出tree-shaking生效前提差异。”
3、核对AI输出是否引用了build.rollupOptions.treeshake的显式开关与optimization.usedExports的联动关系，而非仅泛述“都支持tree-shaking”。
三、注入人工校验断言以约束AI推理边界
当AI对loader与plugin兼容性作出判断（如“vite-plugin-legacy可直接替代webpack的@babel/preset-env”）时，需插入强约束断言防止过度泛化。CodeBuddy支持在提问中嵌入运行时验证条件，强制其调用沙箱执行逻辑推演。
1、构造带断言的指令：“请判断vite-plugin-legacy是否等效于webpack中@babel/preset-env + core-js组合。要求：仅当二者均能生成IE11兼容代码且polyfill注入时机一致时才判定等效，否则明确列出失效场景。”
2、观察AI是否返回具体失效案例，例如：“vite-plugin-legacy在动态import()中不注入regenerator-runtime，而@babel/preset-env默认注入，故异步函数转译结果不一致。”
3、若AI未提供具体失效点，追加指令：“请在本地沙箱中模拟src/main.ts含async/await与dynamic import的场景，分别运行两种配置并比对生成代码中的helper函数存在性。”
四、调用Craft Mode分步验证配置转换逻辑
CodeBuddy的Craft Mode支持将AI建议拆解为可验证步骤，避免一次性转换引入隐性错误。针对Webpack→Vite配置迁移，需逐项验证模块解析、热更新、静态资源处理三类核心能力是否等价。
1、发起Craft Mode指令：“启动Craft Mode，将webpack.config.js中module.rules关于.css/.scss的处理规则，分步转换为vite.config.ts等效配置。每步完成后暂停并输出当前转换项的浏览器运行时行为验证方案。”
2、在第一步暂停时，检查AI是否提出验证方案：“启动Vite dev server，访问包含.scss的页面，打开开发者工具Sources面板，确认styles.scss是否以ESM形式加载且source map可跳转至原始文件。”
3、确认第二步是否覆盖HMR验证：“修改.scss变量值，观察浏览器是否仅刷新样式而不重载JS模块，且控制台无‘[vite] hot updated’以外的警告。”
五、启用AI CLI进行真实构建产物比对
CodeBuddy Code CLI支持在终端直接调用构建命令并分析产物，比纯静态分析更可靠。通过比对Webpack与Vite生成的chunk内容、hash一致性及依赖图谱，可暴露AI未识别的深层差异。
1、在项目根目录执行：npx codebuddy-code run "build --compare webpack vite --output-dir ./dist-compare"。
2、等待CLI完成双构建后，检查./dist-compare/report.json中是否包含“shared-chunk-diff”字段，该字段应列出两套产物中公共chunk的模块组成差异。
3、重点核查AI是否识别出Webpack的SplitChunksPlugin自动提取node_modules中lodash的chunk，而Vite未配置optimizeDeps.include时未预构建lodash，导致首次加载延迟差异。
