Create React App（简称 CRA）是 React 团队官方维护的零配置脚手架，曾长期作为 React 新项目的标准启动方式。它的设计初衷是让开发者无需关心 Webpack、Babel 等构建工具的复杂配置，一条命令即可生成可运行的项目。
CRA 的基本使用
创建项目：
npx create-react-app my-app执行后，CRA 会自动完成以下工作：
- 生成标准化的项目目录结构
- 配置 Webpack、Babel、ESLint 等构建工具
- 内置开发服务器（支持热模块替换）
- 配置 Jest 测试环境
- 生成
public/index.html和src/index.js入口文件
项目结构概览：
my-app
├── public
│ └── index.html
├── src
│ ├── App.js
│ ├── index.js
│ └── ...
├── package.json
└── node_modules启动开发服务器：
cd my-app
npm start浏览器自动打开 http://localhost:3000，并支持热更新（HMR）。构建生产环境版本使用 npm run build，会在 build 目录生成优化后的静态资源。
CRA 的优势
- 零配置开箱即用：完全隐藏 Webpack 等工具链配置，降低入门门槛。
- 官方维护，稳定可靠：与 React 版本兼容性有保障，适合教学和快速原型。
- 内置最佳实践：默认启用代码分割（通过动态
import()）、环境变量前缀REACT_APP_、PWA 支持等。 - eject 逃生舱：
npm run eject可将所有隐藏的配置文件暴露出来，允许自定义 Webpack、Babel 等高级配置。
CRA 的局限与痛点
尽管 CRA 曾是主流，但其技术栈逐渐暴露出一系列问题，导致大规模实际项目中弃用率上升：
1. 构建速度慢
CRA 底层基于 Webpack，开发服务器的冷启动和热更新速度随着项目规模增长明显变慢。大型项目启动可能需几十秒甚至分钟级，严重影响开发体验。
2. 配置僵化，扩展困难
CRA 将 Webpack 配置完全封装，常规修改（如添加 Less 支持、配置路径别名、自定义 Babel 插件）必须通过第三方工具（如 react-app-rewired、craco）绕过，或者 eject 后手动管理配置。eject 是一个不可逆操作，一旦执行就需要自行维护整个构建体系，从此无法跟随 CRA 的官方更新。
3. 依赖更新滞后
CRA 的依赖更新节奏慢，经常落后于 Webpack、Babel 等核心工具的最新稳定版本。例如 Webpack 5 发布后，CRA 经过了很长时间才完成适配。
4. 生产构建体积优化有限
CRA 的默认打包策略比较粗暴，缺乏更精细的 Tree Shaking、代码分割、资源内联等深度优化。一些现代构建工具（如 Vite、Turbopack）在体积和速度上明显更优。
5. 社区活跃度下降
随着 Vite 等新一代工具的崛起，React 官方文档在 2023 年已将 CRA 从“推荐启动方式”中移除，建议使用 Next.js、Remix 等全栈框架或 Vite 等构建工具启动新项目。CRA 的 GitHub 仓库更新频率显著降低，部分 Issues 长期未关闭。
CRA 的当下定位
目前 CRA 仍可运行，但不适合新项目。对于学习 React 基础、写 Demo 或小规模实验，CRA 依旧可用，但生产环境或团队协作项目建议转向 Vite 或 Next.js。如果需要保持类似“零配置”的体验又想获得现代构建速度，可以考虑 create-vite 的 React 模板。
从 CRA 迁移方向
- 迁移到 Vite：手动创建 Vite 项目，将
src目录内容迁移过去，调整index.html中的入口脚本位置，即可享受更快的开发体验。 - 迁移到 Next.js：如果项目需要 SSR 或全栈能力，考虑迁移到 Next.js，利用其页面路由、静态生成等特性。迁移成本较高，适合新项目直接采用。
总体而言，CRA 完成了它在特定历史阶段的使命，但目前已经不再是 React 官方推荐的创建方案。它的局限让我们更清晰地认识到：优秀的工具链应当兼顾零配置的易用性和按需扩展的灵活性。