前端构建工具概览
2026/7/15大约 1 分钟
前端构建工具概览
编译器
编译器负责将现代 JS/TS 代码转换为目标输出格式。
| 名称 | 语言 | 速度 | 特点 |
|---|---|---|---|
| TypeScript (tsc) | TS | 慢 | 官方编译器，类型检查 + 编译 |
| esbuild | Go | 极快 | 轻量级，常用于 Vite 底层 |
| swc | Rust | 极快 | 兼容 Babel 插件，Next.js 使用 |
| Babel | JS | 慢 | 生态最丰富，插件最多 |
趋势：从 tsc/babel 向 swc/esbuild 迁移，编译速度提升 10-100 倍。
打包器
| 名称 | 优化方向 | 特点 |
|---|---|---|
| Webpack | Web 应用、库 | 生态最丰富，配置灵活 |
| Rollup | 库 | Tree-shaking 优秀，Vite 底层 |
| Parcel | Web 应用 | 零配置，内置热更新 |
| Rspack | Web 应用 | Rust 编写，兼容 Webpack 配置 |
| Vite | Web 应用 | 基于 ESM，开发极速 |
库打包工具
| 名称 | 编译器 | 打包器 | 特点 |
|---|---|---|---|
| tsup | esbuild | Rollup | 极快的 TS 库打包 |
| tsdx | Babel | Rollup | 零配置 TS 包开发 |
| microbundle | Babel | Rollup | 零配置微模块打包 |
| unbuild | esbuild | Rollup | 统一的 JS 构建系统 |
Web 应用框架
| 名称 | 编译器 | 打包器 | 框架 |
|---|---|---|---|
| Next.js | swc | Webpack | React |
| Nuxt | esbuild | Rollup | Vue |
| SvelteKit | esbuild | Rollup | Svelte |
| Vite | esbuild | Rollup | 框架无关 |
选择建议
- 新 React 项目 → Next.js
- 新 Vue 项目 → Vite + Vue 或 Nuxt
- 新 Svelte 项目 → SvelteKit
- TS 库 → tsup
- 需要兼容 Webpack 配置 → Rspack
- 零配置构建 → Vite 或 Parcel