前端打包工具Webpack、Rollup、esbuild介绍

[TOC]

## esbuild

esbuild 是用 Go 语言写的极速 JS/TS 打包与转译工具，由 Figma CTO Evan Wallace 开发，主打 “比 Webpack 快 10–100 倍”，无需缓存也能极速构建。一句话：把 JS/TS/JSX/CSS 打包、转译、压缩成浏览器可运行的代码，速度极快。

**核心定位**：打包器（bundler）+ 转译器（transpiler）+ 压缩器（minifier）

### 快速上手 esbuild

+ **安装**

```bash
npm install esbuild --save-dev
```

+ **命令行打包**

```bash
# 打包 src/index.js 为 dist/bundle.js，压缩
npx esbuild src/index.js --bundle --minify --outfile=dist/bundle.js
```

+ **JS API 转译 TS → JS**

```js
const esbuild=require('esbuild');

esbuild.build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  outfile: 'dist/bundle.js',
  minify: true,
  platform: 'browser',
}).catch(() => process.exit(1));
```

## Rollup

+ **定位：**专注库源码打包工具
+ **设计初衷：**给类库、框架打包，不是给业务项目。
+ **核心能力：**
 + 极致 Tree-Shaking（删掉无用代码）。
 + 专注 ESM 标准，打包干净、体积小。
 + 可输出 ESM / CommonJS / UMD 多种格式。
+ **特点：**
 + 打包出来代码干净、无冗余
 + 不擅长处理图片、CSS、复杂静态资源
 + 插件生态够用，但不像 Webpack 万能
 + 适合：写组件库、工具库、框架源码（Vue、React、Vite 源码都是 Rollup 打的）

## Webpack

+ **定位：**全能型 前端工程打包工具
+ 出场最早、生态最强、企业项目用得最多。
+ **核心能力：**
 + 打包 JS、TS、Vue、React、CSS、图片、字体、静态资源所有文件。
 + 通过 loader 翻译文件（less、sass、ts、vue）。
 + 通过 plugin 做工程能力（html 生成、压缩、环境变量、分割代码）。
 + 支持热更新、代码分割、懒加载、多入口打包。
+ **特点**
 + 啥都能做，大而全
 + 配置复杂、学习成本高
 + 基于 Node.js 单线程，大型项目打包慢
 + 适合：日常业务项目、Vue/React 后台管理、复杂企业项目

## 三个打包工具对比

## 极简流程图

### Vite 整体工作流程 + 三大工具分工

```bash
Vite项目
   │
   ├─ 开发环境 npm run dev  ──→ 全权交给【esbuild】
   │      │
   │      ├─ 第三方依赖预构建（CJS→ESM）
   │      ├─ 实时转译 TS/JSX/Vue 单文件
   │      └─ 极速合并、浏览器直接按需加载
   │
   └─ 生产环境 npm run build ──→ 全权交给【Rollup】
          │
          ├─ 代码打包、Tree-Shaking
          ├─ 代码分割、懒加载、CSS拆分
          └─ 输出线上最优静态产物

【Webpack】：独立老打包工具
只负责：传统Vue/React项目、老旧工程、不用Vite的项目
```

### 三者定位极简框图

```bash
前端打包三剑客
├─ Webpack → 传统业务项目全能打包（大而全、配置重、速度慢）
├─ Rollup  → 组件库/工具库打包 + Vite生产打包（产物干净、适合库）
└─ esbuild → Vite开发环境专用（Go语言、极速转译、依赖预构建）
```

### 极简对比记忆图

```bash
开发启动要快 → esbuild
打包上线要稳 → Rollup
老项目全套工程 → Webpack
```

## 扩展 vite 的打包方式

Vite 采用开发环境 esbuild + 生产环境 Rollup 的双引擎架构。

**开发环境：依赖预构建（核心）**

+ 1️⃣第三方依赖（如 React、Lodash）多为 CommonJS，浏览器不认识Vite。
+ 2️⃣Vite 用 esbuild 将依赖一次性转成 ESM 并合并成单文件，缓存到 node_modules/.vite/deps。
+ 3️⃣解决两个问题：
 + CommonJS → ESM：适配浏览器。
 + 合并小模块：减少 HTTP 请求，提升加载速度。

**开发环境：实时转译 TS/JSX**

+ 1️⃣Vite 用 esbuild 实时转译 .ts/.tsx/.jsx，比 Babel 快 100 倍。
+ 2️⃣注意：esbuild 不做 TS 类型检查，需配合 vue-tsc 或 tsc --noEmit。

**生产环境：为什么不用 esbuild 打包**

+ 1️⃣esbuild 虽快，但代码分割、CSS 处理、生态插件不如 Rollup 成熟。
+ 2️⃣Vite 生产环境用 Rollup，兼顾速度、稳定性、功能完整性。