Vite 是目前前端社区最推荐的 React 项目构建工具，它由 Vue.js 作者尤雨溪打造，利用浏览器原生 ES Module 实现极速冷启动和热更新，开发体验远超传统的 Webpack 方案。对 React 开发者来说，Vite 的优势主要体现在：
- 极速启动：即使项目文件数量庞大，也能在几百毫秒内启动开发服务器。
- 热更新快：通过 ES Module 按需编译，代码修改后几乎即时反映在浏览器中，无需等待全量重新打包。
- 配置简洁：开箱支持 TypeScript、JSX、CSS Modules、路径别名等常用特性，无需复杂配置。
- 构建高效：底层基于 Rollup 打包，生成的生产代码体积小、加载快。
创建项目
使用 Vite 官方脚手架创建 React + TypeScript 项目（推荐）：
npm create vite@latest my-react-app -- --template react-ts这条命令会创建一个名为 my-react-app 的文件夹，并自动生成基于 React 18 和 TypeScript 的模板项目。如果不需要 TypeScript，可以将模板替换为 react：
npm create vite@latest my-react-app -- --template react执行后进入项目目录并安装依赖：
cd my-react-app
npm install安装完成后启动开发服务器：
npm run dev浏览器访问 http://localhost:5173，就能看到 React 默认欢迎页。
生成的项目目录
my-react-app/
├── index.html # Vite 以此为入口，无需手动挂载 HTML
├── package.json
├── tsconfig.json # TypeScript 配置
├── vite.config.ts # Vite 配置文件
├── public/ # 静态资源，直接复制到输出目录
└── src/
├── main.tsx # React 应用的挂载入口
├── App.tsx # 根组件
├── App.css
├── index.css
└── assets/ # 组件内引用的资源（会被 Vite 处理）与 Create React App 不同，Vite 的入口 HTML 直接放在项目根目录，index.html 中通过 <script type="module" src="/src/main.tsx"> 引入入口文件，Vite 能够直接处理这种原生 ESM 导入。
关键配置文件 vite.config.ts
模板生成的配置文件非常简洁，通常只需要加上一些常用插件和路径别名：
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
'@': '/src',
},
},
server: {
port: 3000, // 自定义端口，默认 5173
open: true, // 启动时自动打开浏览器
},
});@vitejs/plugin-react提供了 React JSX 转换、Fast Refresh 等核心特性。- 路径别名
@指向src，之后可以用import Button from '@/components/Button'代替相对路径。 server可以配置代理、端口等。
与 CRA 的关键差异
| 特性 | Vite | Create React App |
|------|------|------------------|
| 开发服务器启动速度 | 极快（毫秒级） | 较慢，项目大会更明显 |
| 热更新 | 即时的 ESM 热重载 | Webpack 热更新，有时较慢 |
| 构建工具 | Rollup | Webpack |
| 配置灵活度 | 可直接修改 vite.config | 需要 eject 或使用 craco |
| 官方维护状态 | 社区活跃、迭代快 | 官方已不再推荐，进入维护模式 |
目前，React 官方文档已推荐使用 Vite 或 Next.js 来创建新的 React 项目，CRA 逐步退出历史舞台。对于新项目，Vite 是性价比最高的选择。
补充：Vite + React 的常用插件
随着项目复杂度的增长，你可能需要引入更多 Vite 插件，例如：
vite-plugin-svgr：将 SVG 作为 React 组件导入。vite-plugin-compression：构建时生成 gzip/brotli 压缩文件。unplugin-auto-import：自动导入 React 等库的 API，减少手动 import。vite-plugin-pwa：为应用添加 PWA 能力。
这些插件都可以通过 npm 安装后，在 vite.config.ts 的 plugins 数组中声明。由于 Vite 的插件机制基于 Rollup，整个生态也非常丰富，能够满足企业级项目的各种需求。
使用 Vite 搭建的 React 项目，兼具开发效率和生产性能，是你开始编写 React 组件的最佳起点。