React 官方推荐使用 Vite

程序员三千_
21,171 阅读4分钟

“技术更替不是一场革命，而是一场漫长的进化过程。”

Hello，大家好，我是 三千。

React 官方已明确建议开发者逐步淘汰 Create React App (CRA) ，转而使用 Vite 等现代框架或工具来创建新项目。

那官方为什么要这样做呢？

一、CRA 被淘汰的背景与原因

  1. 历史局限性
    CRA 诞生于 2016 年，旨在简化 React 项目的初始化配置，但其底层基于 Webpack 和 Babel 的架构在性能、扩展性和灵活性上逐渐无法满足现代开发需求。随着项目规模扩大，CRA 的启动和构建速度显著下降，且默认配置难以优化生产包体积。
  2. 维护停滞与兼容性问题
    React 团队于 2023 年宣布停止积极维护 CRA，且 CRA 的最新版本（v5.0.1）已无法兼容 React 19 等新特性，导致其在生产环境中逐渐不适用。
  3. 缺乏对现代开发模式的支持
    CRA 仅提供客户端渲染（CSR）的默认配置，无法满足服务端渲染（SSR）、静态生成（SSG）等需求。此外，其“零配置”理念限制了路由、状态管理等常见需求的灵活实现。

二、Vite 成为 React 官方推荐的核心优势

  1. 性能提升

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

  2. 灵活性与生态兼容

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

  3. 现代化开发体验

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

三、迁移至 Vite 的具体步骤 

  1. 卸载 CRA 依赖

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

  2. 调整项目结构

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

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

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

  3. 配置 Vite
    创建 vite.config.js 文件：

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

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

  4. 更新环境变量
    环境变量前缀需从 REACT_APP_ 改为 VITE_（如 VITE_API_KEY=123）。

  5. 运行与调试
    修改 package.json 脚本命令：

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

四、其他官方推荐的 React 框架 

  1. Next.js

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

  2. Remix

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

  3. Astro

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

五、总结与建议

  • 新项目：优先选择 Vite（轻量级 CSR 项目）或 Next.js（复杂全栈应用）。
  • 现有 CRA 项目：逐步迁移至 Vite，或根据需求转向 Next.js/Remix 等框架。
  • 学习曲线：Vite 对 React 核心概念干扰较小，适合初学者；Next.js 功能全面但学习成本较高。

React 生态正朝着  “库+框架”协同发展 的方向演进，开发者需结合项目需求选择工具链，以平衡性能、灵活性与开发效率。

结语

以上就是今天与大家分享的全部内容，你的支持是我更新的最大动力，我们下期见！

打工人肝 文章/视频 不易，期待你一键三连的鼓励 ！！！

😐 这里是【程序员三千】，💻 一个喜欢捣鼓各种编程工具新鲜玩法的啊婆主。

🏠 已入驻：抖爸爸、b站、小红书（都叫【程序员三千】）

💽 编程/AI领域优质资源推荐 👉 www.yuque.com/xiaosanye-o…

avatar
文章
阅读
粉丝