某小厂前端一面：ECharts、Vite 与 AI 字段名幻觉

《面试题目》

1. React 项目用了什么数据可视化方案？
2. 在写代码、开发、工程上的模块化开发有什么经验？
3. Vite 和 Webpack 有什么区别？
4. 平常用过什么 AI 工具写代码？一般怎么用？会不会 review？
5. 对 AI 的字段名幻觉有没有好的处理方法？
6. 具不具备切图能力？

《参考解析》

Vite 与 Webpack 的差异在开发态。Vite 开发时用浏览器原生 ESM 按需加载，冷启动快，依赖用 esbuild 预构建，HMR 只更新改动的模块；Webpack 先打包整个依赖图再交给浏览器，冷启动和热更新都更慢。生产构建 Vite 用 Rollup，Webpack 的生态和插件更成熟、配置能力更强。

AI 字段名幻觉的根治办法是「把类型变成约束」：把 Prisma schema、接口返回示例、Zod schema 引用给模型，明确字段以这些为准；运行时在请求入参和响应解析处做校验，对不上直接失败；让 AI 只改局部、把字段定义收口到一处，避免前后端各写一遍。

review AI 代码的流程：开发前列出改动清单和约定的函数名/接口名，生成后逐项核对，再跑类型检查、单测，最后在真实页面上操作验证。简单 UI 可以放宽，核心链路必须逐行看。

模块化与组件化：组件化拆界面，模块化拆职责（请求封装、业务逻辑、工具函数、类型定义），目标是可维护、可复用、可测试。回答时结合你项目里的目录结构讲。

切图能力说明会用 HTML/CSS 还原设计稿，能处理响应式、栅格和常见交互态即可。