标准答案
- Webpack 开发模式会从入口开始构建模块依赖图，把模块打成 bundle 后交给浏览器运行。
- Vite 开发模式把源码作为原生 ESM 提供给浏览器，浏览器请求到哪个模块，开发服务器再转换哪个模块。
- Vite 会预构建依赖，把 node_modules 中较稳定的依赖转成更适合浏览器加载的 ESM，减少大量小请求。
- 冷启动时，Vite 通常比传统 Webpack 更快；大型项目里差异更明显。
- 生产构建不是同一个模型。Vite 生产构建默认仍然基于 Rollup 做打包优化。
题目解析
开发服务器和生产构建要分开看。Vite 在开发阶段不急着把整个应用打成一个包，而是把源码按原生 ESM 暴露给浏览器，浏览器请求到某个模块时，开发服务器再做转换。
Webpack dev server 更像是先从入口建立依赖图，在内存中准备一份可运行的应用包。项目入口越大、依赖越复杂，首次启动和热更新需要处理的范围就越容易变大。
这不表示 Vite 在所有项目里都天然更合适。老项目的 loader/plugin、非标准资源处理、微前端约束和团队已有配置，都可能让 Webpack 继续更稳。
代码示例
开发阶段的差异可以简化理解为“先整体打包”与“按请求转换”。
Text
Webpack dev:
entry -> dependency graph -> in-memory bundle -> browser
Vite dev:
browser requests /src/main.ts -> transform this module -> browser requests imports常见误区
- 把 Vite 简单说成“用 esbuild 打包”，忽略开发阶段原生 ESM 按需加载。
- 认为 Vite 生产构建也完全不打包。
- 只比较启动速度，不考虑插件生态、老项目迁移和生产构建行为。