第三章：主流打包工具概览——Webpack、Rollup、Parcel、Vite 的核心差异与选型思路
做前端这么多年，我几乎每天都在跟打包工具打交道。从早期的 Grunt、Gulp，到后来的 Webpack，再到现在的 Vite，工具换了一茬又一茬。但本质问题从来没变过：怎么把代码变小、变快、变稳。
本章咱们就聊聊当前最主流的四个打包工具：Webpack、Rollup、Parcel、Vite。我会结合自己踩过的坑，说说它们到底差在哪，以及项目里该怎么选。
为什么需要打包工具？
说白了，浏览器不认 ES Module 的 import/export（至少以前不认），更不认 JSX、TypeScript、Less。打包工具干的活其实就是三件：编译、打包、优化。
- 编译：把高级语法转成浏览器能跑的 ES5。
- 打包：把零散的模块文件合并成几个（或一个）文件，减少 HTTP 请求。
- 优化：Tree Shaking、代码压缩、代码分割、缓存策略……
嗯，这里要注意，不同工具的侧重点完全不一样。有的适合应用，有的适合库，有的追求零配置，有的追求极致性能。
四大工具概览
Webpack —— 最全能，但也最笨重
Webpack 就像瑞士军刀，什么都能干。我刚开始做前端时，第一个学的就是 Webpack。它的插件生态极其丰富，Loader 机制让你能处理任何文件——图片、CSS、字体，甚至 JSON 的特定字段。
但代价呢？配置复杂。一个中型项目的 Webpack 配置动辄三四百行，而且构建速度在大型项目里会慢到让你怀疑人生。我经历过一个项目，冷启动要 40 秒，HMR 每次也得等两三秒。
Rollup —— 小而美的库打包利器
Rollup 的核心卖点是 Tree Shaking。它基于 ES Module 的静态分析，打包出来的代码极其干净。我记得有一次帮团队打包一个组件库，用 Webpack 打出来 120KB，换成 Rollup 直接缩到 45KB，而且没有冗余代码。
不过 Rollup 对代码分割和 HMR 的支持比较弱，不太适合大应用。它更适合开发 npm 包、组件库、SDK。
Parcel —— 零配置，开箱即用
Parcel 的口号是“零配置”。你只需一个 HTML 入口，它就能自动识别文件类型，自动安装依赖，自动处理。我早期做原型验证时特别喜欢用它，上手极快，几乎没有学习成本。
但它的问题也很明显：可定制性太差，当项目变复杂、需要特殊 Loader 或插件时，Parcel 的处理方式就很蛋疼。而且社区生态远不如 Webpack。
Vite —— 新一代开发体验标杆
Vite 利用浏览器原生 ESM，开发时根本不需要打包——直接按需编译文件，冷启动几乎秒开，HMR 快到感觉不到。我用它重构过一个老项目，之前 Webpack 冷启动要 20 秒，Vite 下不到 1 秒。
它生产环境用 Rollup 打包，所以兼具开发快、生产稳的优点。不过要注意，如果你用了太多非标准的 ESM 语法（比如某些 Node.js 专用模块），Vite 的兼容性可能有些小坑。
核心差异对比
下面这张表格基本概括了四者的主要差异。我建议你把它截下来，选型时拿出来对照一下。
| 维度 | Webpack | Rollup | Parcel | Vite |
|---|---|---|---|---|
| 配置复杂度 | 高（需要学习 Loader/Plugin 体系） | 中（插件较少，配置简洁） | 低（几乎零配置） | 低（约定大于配置） |
| 构建速度（开发） | 慢（全量打包） | 中（支持缓存） | 中（多线程编译） | 快（ESM 按需编译） |
| Tree Shaking | 一般（需要 ESM + 配置） | 优秀（原生支持） | 一般 | 优秀（生产用 Rollup） |
| HMR 体验 | 中（大项目有延迟） | 弱（主要面向库） | 好（默认支持） | 极好（毫秒级更新） |
| 生态丰富度 | 最强（数千插件） | 中（插件少但够用） | 弱（插件较少） | 中（增长快，兼容 Rollup 插件） |
| 最适合场景 | 大型应用、复杂工程 | npm 包、组件库、SDK | 快速原型、小型项目 | 新项目、SPA、SSR |
公司新项目 -> Vite
要发 npm 包 -> Rollup
老项目升级或复杂配置 -> Webpack
快速验证想法 -> Parcel
选型思路：从项目类型倒推
你可能会问：“我该用哪个？”我的答案永远是：看项目类型。别跟风，别为了用新工具而用。
- 大型企业级应用（多页面、复杂状态、大量三方依赖）
首选 Webpack。虽然慢，但它成熟稳定，遇到奇怪问题时社区解决方案最多。如果你能接受 Vite 的生态差距，也可以尝试，但要做好踩坑准备。 - 开源组件库 / 工具库
首选 Rollup。它的 Tree Shaking 和输出多种格式（UMD/ESM/CJS）的能力是天生优势。我自己参与的几个组件库全部用的 Rollup。 - 初创项目 / 快速原型
首选 Vite 或 Parcel。Vite 开发体验最好，Parcel 上手最简单。我建议新项目直接上 Vite，除非你对配置完全不想碰，那才考虑 Parcel。 - 现有老项目迁移
如果老项目是 Webpack，且工程量巨大，别轻易换工具——迁移成本可能高于收益。但如果是维护期的小项目，可以试试迁移到 Vite 来提升开发效率。
我试过用 Rollup 打包一个带动态 import 的应用，结果代码分割做得一塌糊涂，最后被迫换回 Webpack。
也试过用 Parcel 打包一个需要大量定制化 Loader 的项目，折腾两天发现无处改配置，最后弃用。
结论：不要试图用一把钥匙开所有锁。
知识体系框架图
下面这张 SVG 图帮你理清选型的核心思路。记住：工具是手段，不是目的。
图里从中心“打包工具选型”出发，引出四大工具的特点，然后指向两个决策维度：项目类型和团队经验。最后落点——“没有万能工具”，也是我想强调的核心观点。
好了，这一章的核心内容就这么多。下次你在面试或者方案评审时，能用这四点把选型逻辑讲清楚，就已经超过大多数人了。