Vite 面试基础知识速览

一、面试先说结论

1. Vite 为什么快

开发环境基于 ESM 按需加载，不做整包打包；生产环境走 Rollup 做优化产物。

2. Vite 适合什么场景

中大型前端项目、组件库开发、对冷启动和 HMR 速度敏感的团队。

3. Vite 和 webpack 核心差异

webpack 以“打包”为中心；Vite 以“原生模块开发体验 + 构建优化”双阶段为中心。

二、高频问法速答

1. Vite 的启动流程

读取配置 -> 启动 dev server -> 浏览器请求模块 -> 服务端按需转换并返回。

2. 为什么首屏打开快

入口文件和首屏依赖优先加载，其他模块在请求时才编译与下发。

3. 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 开发体验，重点关注同构代码边界和数据预取。

3. Monorepo 场景

配合 workspace 与别名策略，统一依赖版本并减少重复构建。

30 秒口述模板

我会把「vite」分成三层来讲：先讲核心概念和它解决的问题，再讲一个高频场景与实现思路，最后补充常见坑点和优化方向。这样既能回答基础问题，也能接住面试官追问。

2 分钟口述模板

如果展开讲，我会按“定义 -> 原理 -> 场景 -> 取舍”四步回答。先说明「vite」解决的核心问题和边界；再讲 1 到 2 个关键机制，解释为什么这样设计；然后结合一个真实业务场景说明如何落地；最后补充常见坑点、性能或稳定性优化，以及与相近方案的取舍标准。

这样回答的好处是：既有原理深度，也有工程落地感，面试官继续追问到实现细节时也能自然展开。