1.Vite vs Webpack 面试灵魂三问 整理笔记
灵魂问题 1：为什么 Vite 冷启动极快？
第一层：核心原理差异（面试满分答案）
表格
| 工具 | 核心模式 | 工作原理 | 性能特点 |
|---|---|---|---|
| Webpack | 打包型构建 | 启动时全量打包、依赖预编译，把所有模块打包成 bundle 再交给浏览器 | 项目越大，启动越慢，热更新越卡 |
| Vite | 免打包 + 原生 ESM | 开发环境不打包，基于浏览器原生 ES Modules，按需加载，用到哪个模块才加载哪个 | 启动几乎秒开，热更新极快 |
灵魂问题 2：开发环境和生产环境构建有什么不一样？
第二层：关键区别（背会直接用）
表格
| 对比维度 | Webpack | Vite |
|---|---|---|
| 启动速度 | 全量打包 → 启动慢 | 按需加载 → 启动极快 |
| 热更新（HMR） | 重新打包相关模块，开销大 | 只更新修改的文件，速度极速 |
| 生产环境构建 | 自己实现打包逻辑 | 底层基于 Rollup 进行打包 |
| 生态与兼容性 | 生态完整成熟，兼容老项目、老语法 | 更现代轻量，原生支持 ESM，对老项目兼容弱 |
| 依赖处理 | 启动时全量解析依赖 | 用 esbuild 预构建依赖，速度提升 10~100 倍 |
灵魂问题 3：什么场景选 Webpack？什么场景选 Vite？
第三层：面试官加分回答
✅ Webpack 适用场景
-
中大型、业务逻辑复杂的项目
-
维护老项目、需要兼容低版本浏览器的项目
-
对构建定制化、插件生态依赖强的项目（比如需要复杂的资源处理、自定义构建流程）
✅ Vite 适用场景
-
Vue/React 等框架的新项目
-
追求极致开发体验、需要快速启动和热更新的项目
-
现代浏览器环境、依赖 ESM 模块的项目
一句话总结
-
Webpack：先打包，再运行（开发环境启动前就要处理所有模块）
-
Vite：先运行，用到再加载（开发环境利用浏览器原生 ESM，按需处理模块）
2.Vite vs Webpack 面试速记卡片
（直接背，面试张口就来）
灵魂问题 1：为什么 Vite 冷启动极快？
- 核心原理一句话：*
-
Webpack：先打包再运行，启动时全量打包所有模块，项目越大越慢。
-
Vite：先运行再按需加载，开发环境基于浏览器原生 ESM，不用全量打包，启动秒开。
灵魂问题 2：开发 / 生产环境构建有什么不一样？
表格
| 维度 | Webpack | Vite |
|---|---|---|
| 开发启动 | 全量打包 → 慢 | 按需加载 → 秒开 |
| 热更新 | 重新打包模块 → 慢 | 只更新修改文件 → 极速 |
| 生产构建 | 自身实现打包 | 底层基于 Rollup 打包 |
| 依赖处理 | 启动时解析 | esbuild 预构建，提速 10~100 倍 |
| 生态 | 成熟完整，兼容老项目 | 现代轻量，适配新项目 |
灵魂问题 3：什么场景选 Webpack？什么场景选 Vite？
-
选 Webpack：中大型复杂项目、老项目、需要强插件生态 / 兼容低版本浏览器的场景。
-
选 Vite：Vue/React 新项目、追求极致开发体验、现代浏览器环境的场景。
终极一句话总结
Webpack 是 “先打包再运行”，Vite 是 “先运行，用到再加载”。
3.图
