codebuddy可通过ast分析定位冗余es模块导入，提供可视化依赖图谱、esm替代方案推荐、sideeffects合规检查及构建配置审计五类优化路径，精准解决tree shaking失效导致的打包体积膨胀问题。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您在使用CodeBuddy辅助前端项目开发时，发现打包体积异常增大，可能是由于未被使用的ES模块导入（import）未被有效剔除。Tree Shaking依赖静态分析识别未引用的导出，而CodeBuddy可通过解析源码AST、追踪import路径及导出引用关系，定位冗余引入点。以下是CodeBuddy支持的具体优化路径：
一、识别高风险import语句
CodeBuddy能扫描全部ESM格式的import语句，重点标记以下四类易导致Tree Shaking失效的引入模式：该工具会逐文件解析import语法节点，并比对对应模块的export声明与实际调用链。
1、全量导入且仅使用部分成员：import * as _ from 'lodash' 或 import _ from 'lodash'，即使只调用.debounce，整包仍被保留。
2、命名空间导入后动态访问：import * as utils from './utils'; const fn = utils[config.method]，因属性名运行时确定，无法静态判定是否使用。
3、条件性导入或导出包裹：if (DEBUG) import('./debug-tool.js') 或 export const devOnly = () => {...} 在非dev环境未被引用，但未标注sideEffects: false。
4、混入CommonJS模块：import { cloneDeep } from 'lodash'（CJS版）而非lodash-es，导致整个模块不可摇。
二、可视化依赖引用图谱
CodeBuddy基于项目入口生成模块级依赖图，对每个import目标模块进行“引用饱和度”评分——即该模块中被实际调用的导出项数量占其总导出数的比例。低分模块将被突出标为体积膨胀源头。
1、加载项目根目录下的package.json，确认"type": "module"或"exports"字段指向ESM入口。
2、遍历所有.js和.ts文件，提取import语句及其源路径，构建正向依赖边。
3、对每个源模块反向解析其export声明，统计被哪些import语句的解构/命名引用所覆盖。
4、输出热力图：按文件维度展示未引用导出占比，例如utils/date.js导出8个函数，仅2个被引用 → 占比25%，标为高冗余风险。
三、自动推荐ESM替代方案
当检测到第三方库使用CJS版本或未启用按需导入时，CodeBuddy依据npm registry元数据与package.json中的exports字段，匹配可用的ESM兼容替代包。
1、识别import { debounce } from 'lodash' → 检查lodash包是否含"exports": { ".": { "import": "./es/index.js" }字段。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
2、若缺失，则推荐替换为lodash-es并校验其sideEffects: false声明。
3、对Vue/React生态库，优先建议使用官方ESM子包，如@vue/runtime-core替代全量vue，react-is替代prop-types。
4、生成可执行修复脚本：自动重写import语句、更新dependencies、添加sideEffects字段至package.json。
四、副作用声明合规性检查
CodeBuddy验证sideEffects字段是否与模块实际行为一致。若声明false但模块存在顶层副作用（如console.log、全局变量赋值、CSS注入），则Tree Shaking将保守保留整个模块。
1、扫描所有.js文件顶层作用域，标记含console.*、fetch、document.write、require等副作用表达式。
2、检查package.json中sideEffects值：若为false，但当前文件被标记含副作用，则提示必须移除该文件或显式列入sideEffects数组。
3、对CSS/字体等资源文件，验证是否已声明"sideEffects": ["*.css", "*.scss"]，避免样式丢失。
4、输出冲突报告：列出所有被sideEffects: false覆盖但实际含副作用的文件路径。
五、构建配置完整性审计
CodeBuddy比对项目构建配置与Tree Shaking生效前提，识别配置断点。Webpack/Vite/Rollup各工具链有不同默认行为，需确保环境与配置匹配。
1、检查Webpack：确认mode为'production'，且未手动关闭optimization.usedExports或optimization.sideEffects。
2、检查Vite：验证build.rollupOptions.treeshake未设为false，且resolve.alias未将ESM路径错误映射为CJS。
3、检查Babel：确认@babel/preset-env中modules选项为false，防止export被转译为Object.defineProperty。
4、检查TypeScript：确认compilerOptions.module为"ESNext"或"preserve"，避免"commonjs"输出破坏静态分析。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
