前端面试十四之webpack和vite有什么区别
在前端中，构建工具的选择往往决定了开发体验和效率。webpack和vite是两种广泛使用的构建工具。对比图：
Webpack 是“先打包再运行”，Vite 是“先运行再按需编译”。
1. 开发阶段：冷启动 + HMR 速度
| 指标 | Webpack 5 | Vite 5 |
|---|---|---|
| 冷启动 | 3–10 s（全量打包） | 50–300 ms（只启动服务器） |
| HMR | 500 ms–2 s（重新走依赖图） | 10–100 ms（只重新请求单个 ESM） |
| 原理 | 把所有模块揉成 bundle 后丢给浏览器 | 把源码当原生 ESM，浏览器按需去拉；改哪拉哪 |
2. 生产阶段：打包器与产物
| 维度 | Webpack | Vite |
|---|---|---|
| 打包器 | 自身 | Rollup（插件兼容 Rollup 生态） |
| 代码分割 | 手动 splitChunks 调优 | 默认 Rollup 多入口 + 动态 import |
| 构建时间 | 60–180 s（大项目） | 20–60 s（同项目实测） |
| 产物体积 | 经深度调优可最小 | 默认 Tree-shaking 干净，手动调优空间小 |
3. 配置与生态
| 维度 | Webpack | Vite |
|---|---|---|
| 配置文件 | 动辄 200–500 行 | 多数项目 20–50 行搞定 |
| 插件数量 | 7000+（稳定、成熟） | 1000+（增长快，但企业级插件仍少） |
| 特殊需求 | Module Federation、微前端、DLL、Worker -loader 等 | 官方或社区插件逐步补齐，部分需自己封装 |
4. 选型速断
选 Vite：
新代码、Vue/React/Svelte、现代浏览器、追求“秒开”体验
中小型项目、组件库、可视化大屏、低代码平台
选 Webpack：
需要 IE11、微前端、Module Federation、深度分包优化
存量巨型项目（迁移成本 > 收益）
企业级定制流程（私有插件、多套构建策略）