目录
[一、Vue CLI vs Vite 对比](#一、Vue CLI vs Vite 对比)
[二、Vite 核心特点（面试必说）](#二、Vite 核心特点（面试必说）)
[2.1 启动速度极快](#2.1 启动速度极快)
[2.2 热更新超快](#2.2 热更新超快)
[2.3 使用浏览器原生 ES 模块](#2.3 使用浏览器原生 ES 模块)
[2.4 生产环境用 Rollup 打包](#2.4 生产环境用 Rollup 打包)
[3.1 是什么？](#3.1 是什么？)
[3.2 做了哪 3 件事？](#3.2 做了哪 3 件事？)
[3.3 为什么要做预构建？](#3.3 为什么要做预构建？)
[3.4 用什么工具做的？](#3.4 用什么工具做的？)
[3.5 面试标准答案](#3.5 面试标准答案)
[使用 Vite 创建 Vue 3 项目](#使用 Vite 创建 Vue 3 项目)
[vite.config.js 配置](#vite.config.js 配置)
[Q：Vite 为什么比 Webpack 快？](#Q：Vite 为什么比 Webpack 快？)
一、Vue CLI vs Vite 对比
| 对比项 | Vue CLI (Webpack) | Vite |
|---|---|---|
| 启动方式 | 打包所有文件再启动 | 不打包，直接启动 |
| 启动速度 | 慢（越大越慢） | 极快（秒开） |
| 热更新 | 慢（需要重新打包） | 极快（按需更新） |
| 开发环境 | 打包成 bundle | 原生 ES 模块 |
| 生产打包 | Webpack | Rollup |
| 配置复杂度 | 复杂 | 简单 |
| 适用场景 | 老项目 | Vue3 新项目首选 |
二、Vite 核心特点（面试必说）
2.1 启动速度极快
Vue CLI (Webpack)：
┌─────────────────────────────────────────────────────────┐
│ 启动 → 打包所有文件 → 打包完成 → 运行项目 │
│ (耗时 10-30 秒) │
└─────────────────────────────────────────────────────────┘
Vite：
┌─────────────────────────────────────────────────────────┐
│ 启动 → 直接运行（不打包）→ 秒开 │
│ (耗时 < 1 秒) │
└─────────────────────────────────────────────────────────┘2.2 热更新超快
Vue CLI：修改代码 → 重新打包 → 更新页面（慢）
Vite：修改代码 → 只更新改动的模块 → 更新页面（快）2.3 使用浏览器原生 ES 模块
javascript
<!-- Vite 开发环境：直接使用原生 ES 模块 -->
<script type="module">
import { createApp } from '/node_modules/.vite/deps/vue.js'
import App from '/src/App.vue'
// 浏览器直接加载，不打包
</script>2.4 生产环境用 Rollup 打包
| 对比 | Webpack | Rollup |
|---|---|---|
| 打包体积 | 较大 | 更小 |
| Tree-shaking | 一般 | 更优秀 |
| 代码冗余 | 有运行时代码 | 更简洁 |
| 适用场景 | 开发环境 | 生产构建 |
三、依赖预构建（optimizeDeps）
3.1 是什么？
把 node_modules 里的第三方包提前打包、处理好，让 Vite 开发时跑得更快。
3.2 做了哪 3 件事？
| 工作 | 说明 |
|---|---|
| CommonJS → ESM | 把 require/module.exports 转成 import/export |
| 小文件打包 | 把 lodash 等几百个小文件打包成一个文件 |
| 缓存 | 缓存结果，下次启动更快 |
3.3 为什么要做预构建？
不做预构建：
浏览器请求 node_modules/xxx → 可能几百个请求 → 页面卡顿
做了预构建：
浏览器请求 → 几个大文件 → 飞快加载3.4 用什么工具做的？
esbuild - 用 Go 写的，比 Webpack 快 10～100 倍
3.5 面试标准答案
依赖预构建是 Vite 启动时，通过 esbuild 对 node_modules 第三方依赖进行提前处理：
将 CommonJS 模块转换为浏览器支持的 ESM 模块
将分散的小文件打包成少量文件，减少 HTTP 请求
缓存结果，提升二次启动速度
目的是让开发环境加载更快、更稳定。
五、代码示例
使用 Vite 创建 Vue 3 项目
javascript
# 创建项目
npm create vite@latest my-app -- --template vue
# 进入项目
cd my-app
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 打包生产
npm run buildvite.config.js 配置
javascript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
server: {
port: 3000,
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
}
}
},
build: {
outDir: 'dist',
sourcemap: false
},
optimizeDeps: {
include: ['vue', 'axios', 'element-plus'] // 预构建的依赖
}
})六、面试高频问题
Q：Vite 为什么比 Webpack 快？
答：
启动方式不同：Webpack 需要打包所有文件才能启动；Vite 不打包，直接启动，按需加载
利用原生 ES 模块 ：Vite 开发环境直接使用浏览器原生
import/export，无需打包依赖预构建：用 esbuild 预处理第三方依赖，esbuild 比 Webpack 快 10-100 倍
热更新机制：Vite 只更新改动的模块，不重新打包
Q：什么是依赖预构建？
答：
依赖预构建是 Vite 启动时对
node_modules中的第三方依赖进行预处理：
将 CommonJS 格式转为浏览器支持的 ESM 格式
将多个小文件合并成少量文件，减少 HTTP 请求
缓存结果，加快二次启动速度
使用 esbuild 实现，速度极快。