Webpack、Vite、Rollup 核心区别概述
一句话概述
Webpack 是全能型构建工具，Vite 是新时代开发体验的颠覆者，Rollup 是专注高效的库打包专家。
Webpack
核心理念 ：基于依赖图的静态打包器
- 构建方式：开发/生产环境都需全量打包，bundle 模式
- 关键特性：强大的 loader/plugin 生态、代码分割、热更新（HMR）
- 适用场景：企业级复杂应用，需要处理多种资源、复杂构建流程
Vite
核心理念 ：基于原生 ESM 的开发服务器 + 生产打包
- 构建方式：开发环境用原生 ESM 按需加载，生产环境用 Rollup 打包
- 关键特性：闪电般冷启动、模块热更新、开箱即用的前端工具链
- 适用场景：现代前端项目，追求极致开发体验，尤适用于 Vue/React 应用
Rollup
核心理念 ：面向库打包的 ESM 打包器
- 构建方式：基于 ESM 静态分析进行 tree-shaking
- 关键特性：输出格式灵活（ESM/CJS/UMD）、tree-shaking 效率高、配置简洁
- 适用场景：框架/库开发（Vue/React 本身用它打包）、需要精细控制输出格式
核心差异对比
| 维度 | Webpack | Vite | Rollup |
|---|---|---|---|
| 打包理念 | 一切皆模块，全量打包 | 开发不打包，生产用 Rollup | 纯 ESM 打包，专注库 |
| 开发速度 | 慢（需构建依赖图） | 极快（ESM 按需加载） | 中等 |
| 生态插件 | 最丰富 | 快速增长中 | 专注于打包相关 |
| HMR | 支持（需打包更新） | 支持（基于 ESM） | 有限支持 |
| Tree-shaking | 支持 | 生产环境 Rollup 提供 | 效果最好 |