一、打包工具全景概览：为什么我们需要它？

说实话，我刚入行那会儿，前端项目还简单得很。几个 HTML 文件，引几份 CSS 和 jQuery，就能跑起来。但后来项目越来越大，模块越来越多，问题就来了——

文件依赖怎么管理？代码怎么压缩？ES6+ 语法浏览器不认识怎么办？图片、字体这些资源怎么处理？

嗯，这就是打包工具要干的事。

前端工程化演进：从刀耕火种到流水线

我简单梳理一下这段历史，你感受下变化有多大：

阶段	代表工具/方式	核心痛点
原始时代	手动引入 script 标签	全局变量污染、依赖顺序靠人工
模块化萌芽	RequireJS、Sea.js	异步加载慢、配置繁琐
构建工具崛起	Grunt、Gulp	只是任务运行器，不解决模块化
打包时代	Webpack、Rollup、Parcel	配置复杂、构建速度慢
原生 ESM 时代	Vite、esbuild	生态成熟度、兼容性

主流打包工具横向对比

我这些年用过不少工具，踩过不少坑。下面这五款是目前最主流的，我一个个说：

1. Webpack —— 老大哥，生态最全

Webpack 几乎什么都能干。从 JS、CSS、图片到字体、SVG，甚至 WASM，它都有对应的 loader 和 plugin。我在一个大型后台管理系统里用过它，几百个页面，几十个入口，Webpack 的 code splitting 和 tree shaking 确实稳。

但缺点也明显：配置太复杂了。一个 webpack.config.js 能写几百行。而且开发模式下热更新慢，项目大了之后，改一行代码等好几秒。

2. Vite —— 新生代，快得离谱

Vite 利用浏览器原生 ESM，开发时不用打包，直接按需编译。我第一次用的时候，项目启动只要几百毫秒，热更新几乎是即时的。说实话，那种「改完代码立刻看到效果」的体验，用过就回不去了。

Vite 底层用了 esbuild 做预构建，Rollup 做生产打包。所以它既有 esbuild 的速度，又有 Rollup 的灵活性。

3. Rollup —— 库开发者的最爱

Rollup 的 tree shaking 比 Webpack 更彻底。它生成的生产代码更干净、更小。所以很多知名库（比如 Vue、React、D3）都用它打包。

但 Rollup 对代码分割和动态导入的支持比较弱，不太适合大型应用。我一般只在写 npm 包的时候用 Rollup。

4. esbuild —— 极速构建，但功能有限

esbuild 是用 Go 写的，构建速度是 Webpack 的 10-100 倍。我试过用它打包一个中型项目，从 20 秒降到了 0.8 秒。确实夸张。

但它不支持 TypeScript 类型检查，也不支持 HMR（热模块替换）。所以它更适合做底层工具，而不是直接面向开发者的打包工具。

5. Parcel —— 零配置，开箱即用

Parcel 的理念是「你只管写代码，打包的事交给我」。它内置了 JS、CSS、HTML、图片等常见资源的处理，不需要写任何配置文件。

我刚开始学打包时用过 Parcel，确实省心。但它的生态和定制能力远不如 Webpack，遇到特殊需求就不好办了。

核心对比一览

特性	Webpack	Vite	Rollup	esbuild	Parcel
开发速度	慢	极快	中等	极快	快
生产速度	中等	快	快	极快	快
配置复杂度	高	低	中	低	极低
Tree Shaking	好	好	极好	好	好
生态丰富度	极高	高	中	低	中
适用场景	大型应用	中大型应用	库/组件	底层工具	小型项目

知识体系总览

下面这张图，我把整个打包工具的知识结构画出来了。你一看就明白：

选型建议：到底该用哪个？

这个问题没有标准答案。我个人的经验是：

• 新项目，团队不大，追求开发体验 → 首选 Vite。它快，配置少，社区活跃。
• 大型企业级应用，需要高度定制 → Webpack 仍然是最稳妥的选择。虽然慢，但你能控制一切。
• 写一个 npm 库或组件 → Rollup。它打出来的包更干净，体积更小。
• 想快速验证一个想法，不想折腾配置 → Parcel。零配置，开箱即用。
• 需要极致的构建速度，且不介意功能缺失 → esbuild。但一般不建议直接面向开发者用。