React 官方推荐使用 Vite

• 
  
• 开发速度：Vite 基于原生 ESM 模块和 esbuild（Go 语言编写）实现秒级启动与热更新，显著优于 CRA 的 Webpack 打包机制。
  
• 生产构建：通过 Rollup 优化代码体积，支持 Tree Shaking 和懒加载，减少冗余代码。
  

• 
  
• 配置自由：允许开发者按需定制构建流程，支持 TypeScript、CSS 预处理器、SVG 等特性，无需繁琐的 eject 操作。
  
• 框架无关性：虽与 React 深度集成，但也可用于 Vue、Svelte 等项目，适应多样化技术栈。
  

• 
  
• 原生浏览器支持：利用现代浏览器的 ESM 特性，无需打包即可直接加载模块。
  
• 插件生态：丰富的 Vite 插件（如 @vitejs/plugin-react）简化了 React 项目的开发与调试。
  

npm uninstall react-scripts

npm install vite @vitejs/plugin-react --save-dev

• 
  
• 将 index.html 移至项目根目录，并更新脚本引用为 ESM 格式：
  

  <script type="module" src="/src/main.jsx"></script>
  

  
  
  
• 将 .js 文件扩展名改为 .jsx（如 App.js → App.jsx）。
  

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
plugins: [react()],

});

"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}

• 
  
• 适用场景：服务端渲染（SSR）、静态生成（SSG）及全栈应用开发。
  
• 优势：内置路由、API 路由、图像优化等功能，适合企业级应用与 SEO 敏感项目。
  

• 
  
• 适用场景：嵌套路由驱动的全栈应用，注重数据加载优化与渐进增强。
  
• 优势：集成数据预加载机制，减少请求瀑布问题。
  

• 
  
• 适用场景：内容型静态网站（如博客、文档站）。
  
• 优势：默认零客户端 JS 开销，通过“岛屿架构”按需激活交互组件。