前端知识库Vite 面试基础知识速览
开发环境基于 ESM 按需加载，不做整包打包；生产环境走 Rollup 做优化产物。（深入阅读：Vite 的工作模型）
Vite 面试基础知识速览
一、面试先说结论
1. Vite 为什么快
开发环境基于 ESM 按需加载，不做整包打包；生产环境走 Rollup 做优化产物。（深入阅读：Vite 的工作模型）
2. Vite 适合什么场景
中大型前端项目、组件库开发、对冷启动和 HMR 速度敏感的团队。（深入阅读：Vite 与 webpack 的选型）
3. Vite 和 webpack 核心差异
webpack 以“打包”为中心；Vite 以“原生模块开发体验 + 构建优化”双阶段为中心。（深入阅读：Vite 的工作模型）
二、高频问法速答
1. Vite 的启动流程
读取配置 -> 启动 dev server -> 浏览器请求模块 -> 服务端按需转换并返回。（深入阅读：开发阶段按需转换）
2. 为什么首屏打开快
入口文件和首屏依赖优先加载，其他模块在请求时才编译与下发。（深入阅读：开发阶段按需转换）
3. HMR 为什么快
只更新受影响模块，不重建整棵模块图，且更新链路短。（深入阅读：HMR 更新链路）
4. 依赖预构建在做什么
用 esbuild 预构建第三方依赖，统一为 ESM 并做缓存，减少重复解析开销。（深入阅读：依赖预构建的真正目的）
三、配置题必会
1. 路径别名
通过 resolve.alias 统一导入路径，减少相对路径维护成本。（深入阅读：别名策略）
2. 代理跨域
通过 server.proxy 将 /api 转发到后端，解决本地联调跨域。（深入阅读：代理配置的边界）
3. 环境变量
仅 VITE_ 前缀变量可在客户端读取，避免敏感配置泄露。（深入阅读：环境变量）
4. 构建拆包
使用 build.rollupOptions.output.manualChunks 拆分 vendor 与业务包。（深入阅读：拆包策略）
四、性能优化答案模板
1. 冷启动慢
先看依赖体积和预构建缓存，再看插件链是否过重。（深入阅读：冷启动慢的排查顺序）
2. 打包体积大
做路由懒加载、公共包拆分、按需引入和压缩策略优化。（深入阅读：构建慢的排查顺序）
3. 白屏时间长
提取关键渲染路径，延迟非首屏脚本与大资源。（深入阅读：首屏慢的排查顺序）
五、追问加分点
1. Vite 插件本质
基于 Rollup 插件体系扩展，并在开发阶段增加中间件钩子能力。（深入阅读：企业里的构建边界）
2. SSR 支持
Vite 原生支持 SSR 开发体验，重点关注同构代码边界和数据预取。（深入阅读：Vite 的工作模型）
3. Monorepo 场景
配合 workspace 与别名策略，统一依赖版本并减少重复构建。（深入阅读：冷启动慢的排查顺序）
30 秒口述模板
我会把「vite」分成三层来讲：先讲核心概念和它解决的问题，再讲一个高频场景与实现思路，最后补充常见坑点和优化方向。这样既能回答基础问题，也能接住面试官追问。
2 分钟口述模板
如果展开讲，我会按“定义 -> 原理 -> 场景 -> 取舍”四步回答。先说明「vite」解决的核心问题和边界；再讲 1 到 2 个关键机制，解释为什么这样设计；然后结合一个真实业务场景说明如何落地；最后补充常见坑点、性能或稳定性优化，以及与相近方案的取舍标准。
这样回答的好处是：既有原理深度，也有工程落地感，面试官继续追问到实现细节时也能自然展开。