Q01：Webpack 和 Vite 的核心区别是什么？为什么 Vite 在开发阶段那么快？
⏱ 预计阅读时间：3 分钟
原题：Webpack 和 Vite 的核心区别是什么？为什么 Vite 在开发阶段那么快？
🎯 面试官在考什么
- 考点1：Bundle vs Bundleless 的架构差异（最核心）
- 考点2：开发环境启动速度的底层原因（ESM 原生加载 vs 全量打包）
- 考点3：HMR 机制差异（精确替换 vs 全局重构建）
- 考点4：Vite 8 统一引擎后的架构演进（Rolldown 一统）
✅ 答题框架（建议顺序）
- 先说架构本质差异：Webpack 是 Bundle 模式——启动时必须从入口递归打包所有依赖，项目越大启动越慢；Vite 是 Bundleless 模式——开发时利用浏览器原生 ESM 按需加载，只编译当前请求的模块
- 再说速度差异的根因：Webpack 启动要做「全量依赖图构建 + 打包」，时间复杂度随模块数线性增长；Vite 启动只做「依赖预构建 + 启动服务器」，页面请求到哪个模块才编译哪个
- 补充 HMR 差异：Webpack HMR 需要重新构建受影响的 chunk 及其依赖子图；Vite 只需让浏览器重新请求变更模块的 ESM，实现精确到单模块的替换
- 收尾提演进：Vite 8 起用 Rolldown 统一替代了 esbuild + Rollup 双引擎，开发/生产行为完全一致，双引擎痛点已成历史
⚠️ 常见踩坑
- 只说"Vite 快"而不说为什么快 → 面试官追问就卡壳。必须说清 Bundleless + 浏览器原生 ESM 两个关键词
- 把 Vite 的快等同于"不做任何编译" → 错误。Vite 仍要做依赖预构建和 TS/JSX 转换，只是通过 Rolldown/Oxc（Vite 8）实现毫秒级编译，且按需触发
- 认为 Vite 生产构建也快 → 不一定。生产构建仍需全量打包，Vite 8 之前用 Rollup 慢于 Webpack 的场景存在；Vite 8 用 Rolldown 后大幅改善（10-30x faster），但大型项目仍需分包优化
💎 加分项
- 主动提到 Vite 8 的 Full Bundle Mode（实验性）：开发阶段也像生产一样打包，初步结果显示启动快 3 倍、请求减少 10 倍，专门解决大工程 unbundled 模式下的瀑布流问题
- 对比时带数据：如"我在 XX 项目中，Webpack 冷启动 120s，Vite 冷启动 2s，但首屏加载因瀑布请求多了 800+ 个模块请求"
- 主动提到 Rolldown 兼容 Rollup 插件 API，迁移成本低
📚 关键知识点速查
- Bundle 模式：启动时从入口递归打包所有依赖生成 bundle，模块越多启动越慢
- Bundleless 模式：开发时利用浏览器原生 ESM 按需加载模块，服务只编译请求到的文件
- 依赖预构建（Pre-bundling）：Vite 将 node_modules 中的依赖提前打包成 ESM，减少浏览器请求数并兼容 CJS/UMD
- 浏览器原生 ESM：
<script type="module">让浏览器直接支持 import/export，无需打包即可运行模块化代码 - Rolldown：Rust 编写的打包器，Vite 8 起统一替代 esbuild + Rollup，比 Rollup 快 10-30 倍且兼容其插件 API
优先级：🔴高频
