Vite 3.0/4.0面试题：我被问到的那些问题

标题提到的Vite 4.0，在本文写作时（2022年10月）尚未正式发布，正式版于2022年12月发布。本文基于Vite 3.0的使用经验和Vite 4.0的爆料信息，整理Vite相关的面试题。

最近面试了几家公司，Vite相关的问题被问了很多次。本文整理我被问到的那些问题，以及我的回答思路，包括Vite的原理、ESBuild、Rollup、依赖预构建、HMR、和Webpack的对比、性能优化、常见问题等。

一、基础概念题

1. 什么是Vite？

Vite是一个新一代的前端构建工具，由Vue.js作者尤雨溪开发。

Vite的核心特点：

开发服务器启动快：利用浏览器原生ES模块，不需要打包
热更新快：HMR基于原生ES模块，只更新变更的模块
构建用Rollup：生产环境用Rollup打包，输出优化后的代码
开箱即用：支持TypeScript、JSX、CSS预处理器等

Vite的名字来自法语，意思是"快"。

2. Vite和Webpack的区别？

这是最常被问到的问题。

对比项	Vite	Webpack
开发服务器	基于原生ES模块，启动快	基于打包，启动慢
热更新	只更新变更模块，快	重新打包相关模块，慢
构建工具	Rollup	自己的打包器
配置	简单，开箱即用	复杂，需要大量配置
生态	新，插件少	成熟，插件丰富
兼容性	只支持现代浏览器	支持旧浏览器

核心区别：Vite在开发环境不需要打包，利用浏览器原生ES模块；Webpack在开发环境也需要打包。

3. Vite为什么快？

Vite快的原因：

开发环境不打包：利用浏览器原生ES模块，按需加载
依赖预构建：用ESBuild预构建依赖，速度快
HMR快：只更新变更的模块，不需要重新打包
按需编译：只编译当前页面需要的模块

Webpack需要先打包整个项目，才能启动开发服务器。项目越大，打包越慢。Vite不需要打包，启动速度和项目大小无关。

二、原理题

4. Vite的工作原理是什么？

Vite的工作原理，分为开发环境和生产环境。

开发环境：

启动一个开发服务器（基于Koa）
利用浏览器原生ES模块，浏览器请求哪个模块，服务器就编译哪个模块
依赖预构建：用ESBuild预构建node_modules中的依赖，打包成单个文件
HMR：通过WebSocket监听文件变化，只推送变更的模块

生产环境：

用Rollup打包
代码分割、tree-shaking、压缩
输出优化后的静态文件

5. 什么是依赖预构建？为什么需要？

依赖预构建，是Vite在启动时，用ESBuild把node_modules中的依赖打包成单个文件。

为什么需要预构建：

CommonJS兼容：很多依赖是CommonJS格式，浏览器不支持，需要转换成ES模块
性能优化：把多个小文件打包成一个，减少HTTP请求
缓存：预构建的依赖会缓存，只有依赖变化时才重新构建

预构建是Vite快的关键之一。ESBuild用Go写的，比JavaScript写的打包器快10-100倍。

6. Vite的HMR原理是什么？

HMR（Hot Module Replacement，热模块替换），是指修改代码后，不需要刷新页面，只更新变更的模块。

Vite的HMR原理：

开发服务器通过WebSocket和浏览器保持连接
文件变化时，服务器检测到变化，通过WebSocket通知浏览器
浏览器收到通知后，请求变更的模块
替换旧模块，保留应用状态

和Webpack的HMR不同，Vite的HMR只更新变更的模块，不需要重新打包。所以Vite的HMR速度，和项目大小无关。

7. Vite如何处理CommonJS依赖？

Vite用ESBuild预构建依赖，把CommonJS转换成ES模块。

转换过程：

分析CommonJS模块的exports
转换成ES模块的export
处理require，转换成import
处理module.exports，转换成export default

转换后，浏览器就可以直接加载这些依赖了。

三、ESBuild和Rollup

8. ESBuild是什么？为什么快？

ESBuild是一个用Go语言写的JavaScript打包器，速度非常快。

ESBuild快的原因：

Go语言：编译成机器码，比JavaScript快很多
并行化：充分利用多核CPU
零依赖：没有大量的JavaScript依赖
简单的架构：只做打包，不做复杂的优化

ESBuild比Webpack、Rollup等JavaScript打包器快10-100倍。

9. Vite为什么开发环境用ESBuild，生产环境用Rollup？

这是一个好问题。

开发环境用ESBuild：因为ESBuild快，预构建依赖速度快，开发体验好。
生产环境用Rollup：因为Rollup的打包质量更好，支持更多的优化（如tree-shaking、代码分割、插件生态）。

ESBuild虽然快，但打包质量不如Rollup，一些高级优化不支持。所以生产环境用Rollup，保证打包质量。

10. Rollup和Webpack的区别？

Rollup：基于ES模块，tree-shaking更好，输出更干净，适合库的打包。
Webpack：功能更全，插件生态更丰富，适合应用的打包。

Vite选择Rollup，是因为Rollup的ES模块原生支持和tree-shaking更好，输出的代码更小。

四、配置和使用

11. Vite的配置文件怎么写？

Vite的配置文件是vite.config.js（或vite.config.ts）。

基本配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080'
    }
  },
  build: {
    outDir: 'dist',
    assetsDir: 'assets'
  },
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})

Vite的配置比Webpack简单很多，开箱即用。

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

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

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

注意：如果用TypeScript，还要在tsconfig.json中配置paths。

13. Vite如何配置代理？

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

和Webpack的代理配置类似。

14. Vite支持哪些框架？

Vite通过插件支持各种框架：

Vue：@vitejs/plugin-vue
React：@vitejs/plugin-react
Preact：@preact/preset-vite
Svelte：@sveltejs/vite-plugin-svelte
Solid：vite-plugin-solid
原生JavaScript：不需要插件

Vite是框架无关的，任何框架都可以用。

五、性能优化

15. Vite项目如何做性能优化？

Vite项目的性能优化，分为开发环境和生产环境。

开发环境优化：

减少依赖：不必要的依赖不要装
优化依赖预构建：配置optimizeDeps，提前预构建
使用动态导入：减少首屏加载的模块

生产环境优化：

代码分割：用动态导入，分割代码
tree-shaking：确保代码是ES模块，支持tree-shaking
图片优化：用vite-plugin-imagemin压缩图片
压缩：配置build.minify，用terser或esbuild压缩
CDN：把大的依赖放到CDN
懒加载：路由懒加载、组件懒加载

16. 如何优化Vite的构建速度？

用ESBuild压缩（比terser快）
减少插件：不必要的插件不要用
并行构建：Vite默认并行
缓存：利用Rollup的缓存
增量构建：只构建变更的部分

17. Vite的依赖预构建如何优化？

配置optimizeDeps.include，提前预构建需要的依赖
配置optimizeDeps.exclude，排除不需要预构建的依赖
配置optimizeDeps.entries，指定入口文件
清理缓存：删除node_modules/.vite，重新预构建

六、常见问题

18. Vite启动时白屏怎么办？

常见原因：

路径错误：检查import路径是否正确
依赖未预构建：删除node_modules/.vite，重新启动
插件问题：禁用插件，逐个排查
浏览器兼容性：Vite只支持现代浏览器，检查浏览器版本

19. Vite如何支持旧浏览器？

Vite默认只支持现代浏览器（支持原生ES模块）。

如果需要支持旧浏览器（如IE11），用@vitejs/plugin-legacy插件：

import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    })
  ]
})

这个插件会生成两份代码：一份现代浏览器的，一份旧浏览器的。旧浏览器加载兼容版本。

20. Vite和Vue CLI的关系？

Vue CLI是Vue.js官方的脚手架，基于Webpack。Vite是新一代的构建工具，也可以用于Vue项目。

Vue 3推荐用Vite，因为更快。Vue CLI已经进入维护模式，不再添加新功能。

新项目建议用Vite，老项目可以继续用Vue CLI，也可以迁移到Vite。

七、Vite 4.0相关

21. Vite 4.0有什么新特性？

根据爆料，Vite 4.0的新特性可能包括：

支持React SWC：用SWC代替Babel，编译React更快
环境变量改进：更灵活的环境变量配置
CSS改进：更好的CSS处理
插件API改进：更强大的插件系统
性能优化：更快的启动和构建

注意：Vite 4.0在本文写作时尚未发布，具体特性以正式版为准。

22. Vite 4.0会用Rolldown吗？

有传言说，Vite未来会用Rolldown（一个用Rust写的Rollup兼容打包器）代替Rollup，进一步提升构建速度。

但Vite 4.0是否会用Rolldown，还不确定。Rolldown还在开发中，可能在Vite 5.0或更晚的版本中使用。

八、实战题

23. 如何把Webpack项目迁移到Vite？

迁移步骤：

安装Vite和相关插件
创建vite.config.js，配置别名、代理等
把index.html移到根目录
修改import路径（Vite要求加扩展名）
处理环境变量（Vite用import.meta.env，Webpack用process.env）
替换Webpack特有的语法（如require.context）
测试开发环境和生产环境
移除Webpack相关依赖

迁移过程中，最常见的问题是路径和环境变量。

24. Vite如何实现微前端？

Vite可以配合qiankun、wujie等微前端框架使用。

需要注意：

子应用的vite.config.js要配置base和server.port
子应用要导出生命周期函数
样式隔离：用CSS Modules或Shadow DOM
公共依赖：用externals或import-map

25. Vite如何做SSR？

Vite支持SSR（服务端渲染）。

基本思路：

服务端：用Vite的SSR API，编译服务端代码
客户端：用Vite打包客户端代码
同构：组件在服务端渲染成HTML，在客户端激活

Vue 3的SSR可以用Nuxt 3（基于Vite），React的SSR可以用Next.js（也支持Vite）。

九、面试回答技巧

最后，分享几个面试回答技巧。

1. 先说核心，再说细节

回答问题时，先说核心观点，再说细节。比如问"Vite为什么快"，先说"因为开发环境不打包，利用原生ES模块"，再说预构建、HMR等细节。

2. 结合实际项目

如果有实际项目经验，结合项目说。比如"我在XX项目中用了Vite，启动时间从30秒降到了2秒"。

3. 承认不知道

如果不知道，就说不知道，不要瞎编。可以说"这个问题我没深入研究过，但我的理解是……"。

4. 对比着说

很多问题可以对比着说，比如Vite和Webpack的对比，ESBuild和Rollup的对比。对比着说，显得理解更深入。

十、写在最后

Vite是前端构建工具的未来，越来越多的项目在从Webpack迁移到Vite。面试中，Vite相关的问题也越来越多。

本文整理的面试题，涵盖了基础概念、原理、配置、性能优化、常见问题等方面。希望能帮到正在准备面试的你。

当然，面试题只是辅助，真正重要的是实际使用经验。多用Vite做项目，遇到问题、解决问题，自然就能回答好面试题。

2022年了，Vite已经发展到3.x版本，4.0也即将发布。它的生态越来越成熟，性能越来越强。如果你还在用Webpack，可以考虑试试Vite，体验一下"秒开"的感觉。

最后，用一句话总结："Vite的核心是快，快的原因是开发环境不打包。理解了这一点，其他问题就都好理解了。"

愿你面试顺利，拿到心仪的offer。