很多人的React 之旅，是从 CRA（create-react-app）库开始的。
但时至今日，我们发现，通过 CRA 构建项目来学习 React，却并不是一个好点子了。
为什么呢？我们拒绝 CRA 的一些原因如下：
与其他产品相比，构建时间更慢 对生成自定义的控制局限 缺少服务器端渲染（SSR） 过时，因为自 2021 年以来 CRA 再没重大更新。
反之，从传统 CRA 切换到现代 React 框架则有众多好处：可以提供更多功能；可以根据需求，例如 SSR、性能等提供多种选择。
今天，我们将介绍一些我们大家可以使用来代替 CRA 的最佳替代方案，具体涉及：
替代方案的功能和最适合哪种应用开发 一些性能指标，例如开发服务器时间、构建时间、部署时间和首次内容绘制（FCP）。
这些顶级 React 框架绝对不容错过。一起来看看吧。
Next JS
Next.js by Vercel 是面向 web 的全栈 React 框架。
NextJS 一直是我首选的 CRA 替代方案。我用它也有很长时间了。随着一次次的更新，NextJS 在不断地改进。
轻轻松松地，使用 Nextjs，开发人员便能够大展手脚了。
特性：
服务器端渲染：可使用 SSR 提高性能，通过预渲染页面加快加载时间。 API 路由：可通过 API 路由在 NextJS 中集成全栈开发。 自动代码切分：遵循推荐的项目结构，具有更好的代码切分，提高了性能。 与 Vercel 轻松集成：NextJS 由 Vercel 团队构建。因此，使用 Vercel 进行部署轻而易举。
最适合构建与服务器没有集成（或很少与服务器集成）的无服务器应用程序。
SSR：服务器端渲染（SSR）是一种 web 应用程序渲染技术，每次用户请求页面时，都会在服务器上生成页面的 HTML。
ViteJS
时刻准备着追赶冲锋的开发环境。哈哈~
Vite 在构建项目时，更注重快速、加载时间更短的性能。
与 Webpack 等传统捆绑器相比，Vite 使用的开发服务器无需捆绑整个应用程序，即可提供近乎即时的热模块替换（HMR）。
更快，更强，更高效。
特性：
更快的开发服务器：借助本机 ES 模块和现代浏览器功能，提供了更快的开发服务器。 丰富的插件支持：Vite 具有灵活的插件支持。可轻松集成插件来扩展 Vite 的功能。 优化的构建过程：实现了构建时 tree shaking、代码拆分和其他性能增强。 SSR 和 SSG：Vite 还支持服务器端渲染和静态站点生成。
Vite 最适合开发性能更优越的博客网站。
SSG：静态站点生成（SSG）是一种在构建时预呈现网站 HTML 页面的方法，可为每个页面生成静态 HTML 文件。
Remix
Remix 是一个全栈式 web 框架，专注于用户界面，背靠 web 标准，提供快速、流畅且有弹性的用户体验。
Remix 专注于构建更优的用户体验，可用于构建全栈应用程序。如果你熟悉 Rails 和 Laravel 这样的服务器端 MVC web 框架，那么 Remix 就是 View 和 Controller。
特性：
数据加载：使用加载器在渲染页面之前在服务器上获取数据。 轻松路由：提供基于文件的路由系统。可根据创建目录提供路由。NextJS 也支持此功能。 服务器端渲染：支持 SSR。 表单和操作：内置对表单处理和操作的支持。有助于高效管理表单提交和操作。
最适合构建需要高级路由、SSR 和注重性能的项目。
Gatsby
Gatsby 是一个基于 React 的开源框架，重视性能、可扩展性和安全性。
Gatsby 是另一个基于 React 的框架，专注于构建快速、安全和优化的网站。主要用于创建静态站点，也通过 API 和集成支持动态内容。
特性：
服务器端生成：SSG 支持 Gatsby 可将内容预渲染为静态 HTML 文件。 渐进式 web 应用：Gatsby 具有内置的 PWA 功能，可通过本机应用般的功能实现快速、离线就绪的 web 体验。 JAMstack：JavaScript、API 和 Markup 允许通过从 CDN 提供静态文件和使用 API 来构建网站。 内容管理系统：充当 Gatsby 的内容后端，Gatsby 将创作的内容提取到静态站点构建进程中。
最适合通过 Gatsby 使用内容管理系统构建博客了。
性能比较
在详细介绍了每个框架之后，现在让我们来看一下它们的性能指标，例如开发服务器启动、构建时间、部署时间和首次内容绘制所需要花费的时间。
我尝试着在每个框架中创建相同的项目，这个 CSS 动画包含图像和 JSX 元素。
开发服务器
正如你在图表中看到的，ViteJS 运行服务器的速度那是相当的快，而 Gatsby 最慢。这也是 ViteJS 敢声称自己是最快框架之一的原因。
构建时间
我们发现，ViteJs 也是完成构建过程最快的。Gatsby 的构建时间倒数第一。而 NextJS 与 Gatsby 慢得半斤八两。
部署时间
所有框架都部署在 vercel 上。
Vite 最快，12 秒，NextJS 和 Gatsby 最慢。Remix 在所有指标中都保持着第二的位置。
FCP - 桌面
这次神奇了，Nextjs 和 Gatsby 最快，ViteJs 和 Remix 最慢。但话说回来，它们之间差异很小，只相差 0.1 秒。
结论
总之，虽然 Create React App（CRA）对许多开发人员来说是一个很好的起点，但现在我们有了更高级、功能更丰富的替代方案：NextJS、ViteJS、Remix 和 Gatsby ，这些框架每一个都具有针对不同用例量身定制的独特优势。
NextJS 非常适合用于通过无缝 Vercel 集成构建服务器渲染的应用程序。 ViteJS 的性能非常出色，尤其是在开发速度方面，是优先考虑快速构建时间的绝佳选择。 Remix 为全栈应用程序提供了强大的解决方案，专注于高级路由、服务器端渲染和丰富的用户体验。 Gatsby 仍然是静态站点生成的有力竞争者，尤其是对于受益于内置性能优化和 PWA 功能的内容密集型站点。
总而言之，框架的选择取决于特定的项目需求，取决于你需要性能、服务器端渲染、易于部署还是全栈功能。
从 CRA 转向这些现代替代方案可以大大增强开发体验，加速收获项目成果。
希望这篇文章对大家有所帮助。编码快乐！
END
热门推荐
- JavaScript 性能优化全家桶：6 个方面 9 点建议
