【Vite】Vite 构建 React 项目中 Select a variant 配置选择指南：标准版 vs SWC-EW帮帮网

概述

在使用 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

选择建议

迁移指南

从标准版迁移到 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 版本在构建速度上有显著优势
选择主要基于项目规模和性能需求
可以随时在两种配置之间切换

选择适合你项目需求的配置，享受更好的开发体验！

【Vite】Vite 构建 React 项目中 Select a variant 配置选择指南：标准版 vs SWC

概述