【Vite】Vite 构建 React 项目中 Select a variant 配置选择指南：标准版 vs SWC
概述
在使用 pnpm create vite 创建 React 项目时，在 “Select a variant” 步骤中，你会看到好多配置，其中有两个 TypeScript 相关的选项：
- TypeScript
- TypeScript + SWC
这两个选项在功能上基本相同，但在性能和构建工具链上有显著差异。本文将详细解析它们的区别，帮助你做出合适的选择。
核心区别
1. 转译器差异
| 配置选项 | 类型检查 | 代码转译 | 构建流程 |
|---|---|---|---|
| TypeScript | TypeScript 编译器 (tsc) | Babel | TypeScript → Babel → JavaScript |
| TypeScript + SWC | TypeScript 编译器 (tsc) | SWC | TypeScript → SWC → JavaScript |
2. 性能对比
| 特性 | TypeScript (Babel) | TypeScript + SWC |
|---|---|---|
| 构建速度 | 较慢 | 显著更快 (10-20倍) |
| 内存使用 | 较高 | 较低 |
| 热重载速度 | 标准 | 更快 |
| 类型检查 | 完整支持 | 完整支持 |
技术实现细节
TypeScript (标准版)
使用的插件： @vitejs/plugin-react
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'export default defineConfig({plugins: [react()], // 使用 Babel 进行转译
})
依赖特征：
{"devDependencies": {"@vitejs/plugin-react": "^4.6.0","typescript": "~5.8.3"// 没有 SWC 相关依赖}
}
构建脚本：
{"scripts": {"build": "tsc -b && vite build"}
}
TypeScript + SWC
使用的插件： @vitejs/plugin-react-swc
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'export default defineConfig({plugins: [react()], // 使用 SWC 进行转译
})
依赖特征：
{"devDependencies": {"@vitejs/plugin-react-swc": "^3.0.0","typescript": "~5.8.3"}
}
如何识别当前项目使用的转译器
1. 检查 package.json 中的插件
# 检查是否包含以下依赖之一：
grep -E "@vitejs/plugin-react" package.json
grep -E "@vitejs/plugin-react-swc" package.json
2. 查看 vite.config.ts 配置
// Babel 版本
import react from '@vitejs/plugin-react'// SWC 版本
import react from '@vitejs/plugin-react-swc'
3. 检查 README.md 说明
标准版 README 会说明：
- [@vitejs/plugin-react] uses [Babel] for Fast Refresh
SWC 版 README 会说明：
- [@vitejs/plugin-react-swc] uses [SWC] for Fast Refresh
选择建议
推荐使用 TypeScript + SWC 的场景
- ✅ 大型项目 - 构建速度是瓶颈
- ✅ 频繁开发 - 需要快速的热重载
- ✅ 现代浏览器 - 不需要支持很老的浏览器
- ✅ 性能敏感 - 团队对构建性能有要求
- ✅ 新项目 - 没有历史包袱
推荐使用标准 TypeScript 的场景
- ✅ 小型项目 - 构建速度不是问题
- ✅ 特殊需求 - 需要 SWC 不完全支持的特性
- ✅ 稳定性优先 - 更注重稳定性和兼容性
- ✅ 团队熟悉度 - 团队对 Babel 生态系统更熟悉
- ✅ 企业环境 - 需要更保守的技术选择
迁移指南
从标准版迁移到 SWC 版
- 安装 SWC 插件
pnpm add -D @vitejs/plugin-react-swc
- 更新 vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'export default defineConfig({plugins: [react()],
})
- 移除旧插件
pnpm remove @vitejs/plugin-react
从 SWC 版迁移到标准版
- 安装标准插件
pnpm add -D @vitejs/plugin-react
- 更新 vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'export default defineConfig({plugins: [react()],
})
- 移除 SWC 相关依赖
pnpm remove @vitejs/plugin-react-swc
总结
TypeScript + SWC 是 Vite 生态系统中推荐的配置，它在保持完整 TypeScript 功能的同时，提供了显著的性能提升。对于大多数现代项目，特别是中大型项目，强烈推荐使用 TypeScript + SWC 配置。
关键要点：
- 两种配置的类型检查能力完全相同
- SWC 版本在构建速度上有显著优势
- 选择主要基于项目规模和性能需求
- 可以随时在两种配置之间切换
选择适合你项目需求的配置，享受更好的开发体验！