Create React App 的兴衰史：一代前端传奇的落幕
还记得 2016 年吗？当时想要快速搭建一个简单的 React 项目，就像在没有说明书的情况下组装一个柜子。你得手动配置 Webpack、设置 Babel、为 CSS loader 写配置，还要搭建本地开发服务器。光是环境配置就要花上一整天，而你的实际应用代码还没写一行。
随后 Facebook 发布了 Create React App（CRA）。一条 2 命令就能生成一个可直接使用的项目。无需任何提示、无需对话框、更无需成千上万行的配置代码。
如今这个工具已被正式标记为弃用状态，进入长期维护阶段。React 官方文档直接建议迁移到 Vite 或 Next.js 等替代方案。让我们回顾 CRA 如何改变了前端行业，其内部机制是怎样的，以及为什么它的时代走向了终结。
Create React App 的作用
这个工具的理念契合“零配置”概念。开发者无需深入了解构建工具设置，就能获得一个可用的技术栈。
所有基础设施都被隐藏在一个包——3 中。它是一个黑盒，内含 Webpack、Babel、ESLint 和 PostCSS。
快速启动是这样的：
0大约三十秒后，浏览器会打开一个页面，显示在 4。
目录结构非常干净。根目录下没有 5 或 6 文件：
1内部工作原理
CRA 建立在三个原则之上：单一构建依赖、零初始设置，以及一个紧急出口命令。
单一依赖
以前，更新工具链简直就是噩梦。更新 Webpack——Babel 就坏了。更新 Babel——某个 ESLint 插件就停止工作了。
在 CRA 中，7 负责一切。更新这个库就会更新整个底层构建链。它打包了：
- 开箱即用的 JSX、ES6+ 和 TypeScript 支持
- 通过 Autoprefixer 自动注入 CSS 厂商前缀
- 使用 Jest 进行交互式测试运行和文件监听
- 直接在浏览器中显示构建错误覆盖层
如果你在语法上打错了字，CRA 会显示一个清晰的界面，指向具体的行和字符：
Eject 机制
如果默认配置不够用怎么办？比如，你需要某个罕见的插件来处理特定文件类型。
针对这种情况，创作者添加了 8 命令。它把项目从里到外翻了个遍：移除 9 并将所有数百行 Webpack 和 Babel 配置直接复制到你的项目中。
这是一张单程票。没有办法恢复干净的结构，你得自己维护那堆混乱的配置。
为什么 Create React App 被淘汰了
时间成了 CRA 的敌人。技术在进步，工具的架构决策反而变成了弱点。
首先是速度问题。Webpack 在启动开发服务器时会从头开始重建和分析整个项目。当项目增长到数百个组件时，启动和热重载需要数十秒。后来出现的 Vite 使用原生浏览器 ES 模块和超快的 Go 编译器 esbuild 进行实时构建。
其次是向 SSR 和服务端组件的转变。CRA 只能构建客户端为中心的单页应用（SPA）——一个在用户浏览器中用脚本填充的空 HTML 文件。良好的 SEO 和快速的首屏渲染需要服务端渲染，而 CRA 根本无法提供。
第三是臃肿的体积。新建项目的 10 文件夹重达数百兆字节，即使在快速网络下安装依赖也需要几分钟。
用什么替代 CRA
React 官方指南给出了明确的方向：
- Vite——如果你需要一个快速的 SPA、个人项目或个人博客，且不需要服务端渲染。它在毫秒级启动，运行速度明显更快。
- Next.js 或 Remix——如果你在构建一个具有 SSR、路由、图片优化和服务端组件的成熟生产级应用。
- Expo——如果你计划使用 React Native 编写跨平台移动应用。
传奇的遗产
Create React App 做了最重要的事：它为开发者体验设立了高标准。它向整个行业展示了构建 Web 应用可以很简单，不需要在入职第一天就深入了解 Webpack。
如今在 CRA 上启动新的正式项目已没有实际价值。但如果你碰到一个三年前的教程，或者需要快速搭建一个沙盒环境——CRA 仍然能用。
相关项目