Vite 和 Webpack 对比：新旧两代构建工具
Vite 用原生 ESM 实现秒级启动，Webpack 以深度定制称霸十年。本文从配置、开发体验、生产构建与插件生态全面对比。
新项目无条件选 Vite（启动毫秒级、HMR 即时、配置简洁）；Webpack 存量项目按规模决定：能用 Rspack 提速先用，重构窗口期迁 Vite。构建工具的世代交替已完成。
本文涉及 Vite 架构时，以版本区分：Vite 7 及更早版本使用 esbuild／Rollup 的组合；Vite 8 已改用 Rolldown 与 Oxc。旧插件及构建选项迁移请按 Vite 8 迁移文档 检查，不能将旧版本的内部实现当作当前所有版本的行为。
架构差异
Webpack：一切皆需打包——开发期也走完整 bundle，项目越大启动越慢（分钟级不罕见）。
Vite：开发期利用浏览器原生 ESM——按需编译单个模块，启动与项目规模无关；生产才用 Rollup 打包。
配置对比
// Vite：常规需求十行内
export default { plugins: [react()] };
// Webpack：同样的需求数倍配置（entry/output/loader/plugin 全套）
Webpack 的 flexibility 是真实的——但 95% 项目用不到那 5% 的深度。
开发体验
启动：Vite 毫秒级 vs Webpack 随规模线性增长；HMR：Vite 精确到模块即时生效，Webpack 的热更新在大项目中明显迟缓。开发体验差距是迁移的第一驱动力。
生产构建
两者产物质量都生产级：代码分割、tree-shaking、压缩。Webpack 的 chunk 控制更精细（splitChunks 的颗粒度）；Vite（Rollup）的默认策略对多数项目更优。
插件生态
Webpack 的生态积累更厚（loader/plugin 数量级优势）；Vite 插件覆盖主流需求且大量兼容 Rollup 插件。冷僻需求查两遍生态再决定。
常见问题（FAQ）
Q：CRA（create-react-app）项目怎么迁？
CRA 已废弃——官方推荐即 Vite/Next.js。迁移：index.html 移到根目录、环境变量 REACT_APP_ 前缀改 VITE_、jest 换 vitest。社区有 codemod。
Q：Webpack 的 Module Federation 有替代吗？
Rspack 原生支持 MF——微前端存量可走 Rspack 路径保 MF 能力。
Q：老浏览器兼容？
@vitejs/plugin-legacy 生成降级产物——Vite 不限制你的兼容目标。
参考文档
本文依据公开文档整理，示例需按项目依赖版本验证；不将文档中的性能描述视为本项目实测结果。
