前端面试宝典

 

Vite 高频面试题（含答案，前端面试必背）

我整理了前端面试中最常问的 Vite 核心面试题，覆盖原理、配置、优化、对比 webpack 等，直接背就能用！

一、基础原理类（必问）

1. 什么是 Vite？它的核心优势是什么？

答案：
Vite 是一款新一代前端构建工具，基于 ES Modules 和 esbuild（预构建）、Rollup（生产打包）实现。
核心优势：

  1. 极速启动：开发环境无需打包，利用浏览器原生 ESM 按需加载；
  2. 按需编译：修改哪个文件就编译哪个，热更新（HMR）速度极快；
  3. 开箱即用：内置支持 TS、JSX、CSS 预处理器、静态资源等；
  4. 生产高效：生产环境用 Rollup 打包，体积更小、 tree-shaking 更强。

2. Vite 为什么比 webpack 快？核心原理是什么？

答案：

  1. 开发环境不打包
    • webpack：先将所有模块打包成 bundle，再启动服务，项目越大越慢；
    • Vite：直接启动服务，浏览器请求时才编译对应模块（按需编译）。
  2. 依赖预构建（esbuild）
    • 用 esbuild（Go 语言编写） 预构建第三方依赖，比 webpack 快 10~100 倍；
    • 将 CommonJS/UMD 模块转为 ESM，处理多依赖文件合并，减少请求。
  3. 高效热更新
    • Vite 只编译修改的模块，HMR 性能不受项目体积影响。

3. Vite 开发环境和生产环境分别用什么打包？

答案：

  • 开发环境：基于 原生 ES Modules（ESM），不打包，按需编译；
  • 生产环境：使用 Rollup 打包（Rollup 打包产物更精简、适合生产环境）。

4. 什么是 Vite 的依赖预构建？作用是什么？

答案：
Vite 启动时会用 esbuild 处理 node_modules 里的第三方依赖，叫依赖预构建。
作用：

  1. 将 CommonJS/UMD 模块转为浏览器支持的 ESM；
  2. 合并多个依赖文件，减少浏览器请求数量；
  3. 缓存依赖，大幅提升二次启动速度。

二、配置与使用类

5. Vite 常用配置项有哪些？

答案：

export default {
  server: { port: 3000, open: true, proxy: {} }, // 开发服务
  build: { outDir: 'dist', sourcemap: false }, // 打包配置
  resolve: { alias: { '@': '/src' } }, // 路径别名
  plugins: [], // 插件
  css: { preprocessorOptions: { scss: {} } }, // CSS 预处理器
  optimizeDeps: {} // 依赖预构建配置
}

6. Vite 如何配置路径别名？

答案：

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

7. Vite 环境变量怎么用？和 webpack 区别？

答案：

  1. 文件：.env（全局）、.env.development、.env.production
  2. 变量必须以 VITE_ 开头才能被客户端识别；
  3. 使用：import.meta.env.VITE_APP_KEY
  4. 和 webpack 区别：
    • webpack：process.env.XXX
    • Vite：import.meta.env.XXX

三、进阶原理类（高频压轴）

8. 详细说说 Vite 的工作流程

答案：

  1. 启动服务：读取配置，初始化插件；
  2. 依赖预构建：esbuild 编译第三方依赖，缓存到 node_modules/.vite；
  3. 浏览器请求：请求入口文件，Vite 拦截请求，实时编译对应模块；
  4. 热更新：文件修改后，Vite 推送更新给浏览器，局部替换模块；
  5. 生产打包：Rollup 打包、压缩、tree-shaking，输出 dist。

9. Vite 热更新（HMR）原理？

答案：

  1. Vite 监听文件变化；
  2. 找到修改文件对应的最小更新模块；
  3. 通过 WebSocket 通知浏览器；
  4. 浏览器只重新请求该模块，局部更新，不刷新整个页面。

10. Vite 生产打包优化方案

答案（高频考点）：

  1. 代码分割：路由懒加载 () => import('xxx')；
  2. 资源压缩：开启 build.minify（esbuild/terser）；
  3. 图片优化：使用 vite-plugin-image-optimizer 压缩图片；
  4. 第三方依赖分包：build.rollupOptions.manualChunks 拆分 vendor；
  5. 关闭 sourcemap：build.sourcemap = false；
  6. 开启 gzip/brotli 压缩：使用 vite-plugin-compression。

四、对比与踩坑类

11. Vite 对比 webpack 的优缺点？

答案：
✅ 优点：启动快、热更新快、配置简单、原生 ESM 支持；
❌ 缺点：

  • 生态不如 webpack 完善，部分老库不兼容 ESM；
  • 开发环境依赖浏览器 ESM，低版本浏览器不支持；
  • 生产环境插件生态比 webpack 少。

12. Vite 开发环境为什么不能用 CommonJS 模块？

答案：
Vite 开发环境基于浏览器原生 ESM，只识别 import/export；
不支持 require/module.exports，第三方库需通过预构建转为 ESM。

13. Vite 打包后页面空白/报错常见原因？

答案：

  1. 路径问题：base 配置错误（部署到子目录需设置 base: './'）；
  2. 路由模式：history 模式后端未配置 fallback；
  3. 不支持 CommonJS 语法；
  4. 第三方库未兼容 ESM。

五、高频简短背诵版（面试速记）

  1. Vite 快的原因：不打包+esbuild预构建+按需编译
  2. 开发环境：ESM，生产环境：Rollup
  3. 环境变量：import.meta.env，必须以 VITE_ 开头
  4. 热更新：只更新修改模块，WebSocket 推送
  5. 别名配置：resolve.alias
  6. 空白排查：base 路径、路由、CommonJS 语法

总结

这些是前端面试中 90% 会问到的 Vite 题目，覆盖原理、配置、优化、踩坑，背熟就能应对绝大多数面试。
需要我再给你整理一份可直接背诵的精简版答案，或者模拟面试问答吗？