前言
记录 webpack与vite对比差异 的学习总结
有误请多多指正
Webpack vs Vite 对比
| 对比维度 | Webpack | Vite |
|---|
| 构建速度 | 开发和生产环境均需全量打包，项目越大启动和编译越慢 | 开发环境按需编译（原生 ESM 加载），生产环境用 Rollup 打包，速度提升 10-100 倍 |
| 打包方式 | 将所有模块打包成一个或多个 bundle 文件（含 JS、CSS、图片等） | 开发环境不打包，直接通过浏览器加载模块；生产环境用 Rollup 打包优化 |
| 热更新（HMR） | 需重新构建整个模块链，更新速度随项目规模下降 | 仅更新修改的模块（毫秒级），不受项目规模影响 |
| 配置复杂度 | 需手动配置 Loader、Plugin、代码分割等，学习成本高 | 开箱即用，默认集成现代框架支持，配置文件极简 |
| 生态系统 | 插件生态丰富（Loader/Plugin 超 2000+），支持老旧工具和复杂需求 | 生态较新，但兼容 Rollup 插件，对 Vue/React 支持更友好 |
| 浏览器兼容性 | 通过 Babel 和 Polyfill 支持 IE11 等老旧浏览器 | 默认仅支持现代浏览器（需 @vitejs/plugin-legacy 兼容旧版） |
| 生产优化 | 成熟的代码分割、Tree Shaking、压缩优化，适合大型项目 | 依赖 Rollup 实现优化，中小型项目性能足够，大型项目定制能力较弱 |
| 核心原理 | 递归分析依赖图，统一模块化规范（CommonJS/ESM），全量转译 | 原生 ESM 按需加载 + Go 语言预构建依赖，冷启动仅编译必要模块 |
| 适用场景 | 企业级大型项目、需兼容旧浏览器、深度定制构建流程 | 中小型项目、现代框架开发、追求极速启动和热更新 |
关键差异总结
| 特性 | Webpack 优势场景 | Vite 优势场景 |
|---|
| 启动速度 | ❌ 大型项目冷启动可能超过 1 分钟 | ✅ 任何规模项目均可秒级启动 |
| 开发体验 | ❌ 修改代码后需等待全量编译 | ✅ 修改后立即生效（毫秒级 HMR） |
| 扩展性 | ✅ 可通过自定义 Loader/Plugin 实现任何需求 | ❌ 依赖 Rollup 插件生态，复杂需求开发成本较高 |
| 学习成本 | ❌ 需掌握 Loader、Plugin、Babel 等完整知识体系 | ✅ 10 分钟上手，框架官方预设配置开箱即用 |
| 未来趋势 | ❌ 逐渐被新兴工具替代（仍占据存量市场） | ✅ 2025 年新增项目使用率超 60%（尤雨溪团队持续迭代） |
