比较顶级 React 框架

介绍

NextJS

ViteJS

混音

盖茨比

性能比较

与我联系🚀

结论

介绍

学习 React 时，我们通常都是从 CRA（create-react-app）库开始的。它是 React 之旅的良好起点，但目前用它来构建项目并非明智之举。以下是一些目前应该避免使用 CRA 的理由：

• 与其他方案相比，构建时间较慢
• 对构建定制的控制有限
• 缺乏服务器端渲染（SSR）
• 已过时，因为自 2021 年以来 CRA 没有进行重大更新。

如你所见，从传统的 CRA 切换到现代的 React 框架有很多理由，因为它可以提供更多功能。根据你的需求，例如 SSR、性能等，有多种替代方案。

今天，我们将探讨一些可以替代加拿大税务局 (CRA) 的顶级替代方案。我们将讨论

• 每个替代方案
• 它们的功能和最适合哪种应用程序开发的套件
• 一些性能指标，例如开发服务器时间、构建时间、部署时间和首次内容绘制。

希望这能让你兴奋。现在，我们开始吧。

NextJS

Vercel 的 Next.js 是用于 Web 的全栈 React 框架。

NextJS 一直是我首选的 CRA 替代方案。我已经用了很长时间了。NextJS 的每次更新都在不断改进。它们提供了大量功能，让开发者可以轻松地使用 NextJS 构建项目。

特征：

• 服务器端渲染：可以使用 SSR 来提高性能，通过预渲染页面来加快加载时间。
• API 路由：通过 API 路由，我们可以在 NextJS 中集成全栈开发。
• 自动代码分割：通过遵循推荐的项目结构，我们可以进行更好的代码分割，从而提高性能。
• 轻松与 Vercel 集成：NextJS 由 Vercel 团队构建。因此，使用 Vercel 进行部署变得非常容易。

它最适合构建与服务器没有或很少集成的无服务器应用程序。

注意：
服务器端渲染：服务器端渲染 (SSR) 是一种 Web 应用程序渲染技术，每次用户请求时都会在服务器上生成页面的 HTML。

ViteJS

为最终能够赶上您的开发环境做好准备。

Vite 更注重性能，旨在构建快速且加载时间更短的项目。与 Webpack 等传统打包工具不同，Vite 使用的开发服务器无需打包整个应用程序即可提供近乎即时的热模块替换 (HMR)。这样一来，Vite 的开发服务器速度更快。

特征：

• 更快的开发服务器：借助原生 ES 模块和现代浏览器功能，它提供了更快的开发服务器。
• 丰富的插件支持：Vite 拥有灵活的插件支持，您可以轻松集成不同的插件来扩展 Vite 的功能。
• 优化构建过程：在构建时实现树摇动、代码拆分和其他性能增强。
• SSR 和 SSG：Vite 还支持服务器端渲染和静态站点生成，以获得更好的性能。

Vite 是开发性能更佳的作品集或博客网站的最佳套件。

注意：
SSG：静态站点生成（SSG）是一种在构建时预渲染网站 HTML 页面的方法，为每个页面生成静态 HTML 文件。

混音

Remix 是一个全栈 Web 框架，可让您专注于用户界面并通过 Web 标准进行工作，以提供快速、流畅且有弹性的用户体验。

Remix 专注于打造更佳的用户体验。它可用于构建全栈应用程序。如果您熟悉 Rails 和 Laravel 等服务器端 MVC Web 框架，那么 Remix 就是视图和控制器。

特征：

• 数据加载：在呈现页面之前，它使用加载器在服务器上获取数据。0
• 轻松路由：它提供了一个基于文件的路由系统。它根据您要创建的目录提供路由。NextJS 也支持此功能。
• 服务器端渲染：它还支持 SSR 以提供更好的性能。
• 表单和操作：Remix 内置了对表单处理和操作的支持。这有助于高效管理表单提交和操作。

它最适合构建需要高级路由、SSR 和关注性能的项目。

盖茨比

Gatsby 是一个基于 React 的开源框架，具有内置的性能、可扩展性和安全性。

Gatsby 是另一个基于 React 的框架，专注于构建快速、安全且优化的网站。它主要用于创建静态网站，但也通过 API 和集成支持动态内容。

特征：

• 服务器端生成（SSG）：它还支持 Gatsby 并将内容预渲染为静态 HTML 文件。
• 渐进式 Web 应用程序：Gatsby 具有内置的 PWA 功能，可通过类似原生应用程序的功能实现快速、离线的 Web 体验。
• JAMstack：JavaScript、API 和 Markup 让您可以通过从 CDN 提供静态文件并使用 API 来构建网站。
• 内容管理系统：在 Gatsby 中，它作为内容创作的后端，并且 Gatsby 将这些内容拉入其静态站点构建过程中。

通过 Gatsby 使用内容管理系统构建博客的最佳套件。

性能比较

我们已经了解了每个框架的功能以及最适合的内容类型。现在，让我们来看看一些性能指标，例如开发服务器的启动时间、构建时间、部署时间和首次内容绘制时间。

我使用了包含图片和 JSX 元素的 CSS 动画，在每个框架中创建了这个项目。现在，内容保持不变，这使得评估性能变得容易。

开发服务器

注意：框架名称旁边的数字是所花费的时间。以秒为单位。

如图所示，ViteJS 的服务器运行速度非常快，而 Gatsby 的速度最慢。这与 ViteJS 号称是最快的框架之一的事实相符。

构建时间

在这里，ViteJs 也是构建过程最快的。Gatsby 的构建时间仍然是最慢的。NextJS 几乎是最慢的。

部署时间

所有框架都部署在vercel上。

Vite 速度最快，耗时 12 秒；NextJS 和 Gatsby 速度最慢；Remix 在各项指标中均保持第二的位置。

首次内容绘制 - 桌面

而桌面上每个框架的总体得分都是 100。首次内容绘制略有不同。

其中 Nextjs 和 Gatsby 最快，ViteJs 和 Remix 最慢，两者之间的差距仅为 0.1 秒。

您可以在此处详细了解每个 PageSpeed Insight：

• 韦尔塞尔
• ViteJS
• RemixJS
• 盖茨比

与我联系🚀

让我们保持联系，随时了解科技、创新及其他领域的最新资讯！
Twitter
LinkedIn
此外，如果您有兴趣，我愿意撰写自由撰稿文章，请通过电子邮件或社交媒体联系我。

结论

总而言之，虽然 Create React App (CRA) 对许多开发者来说是一个很好的起点，但显然现在有更先进、功能更丰富的替代方案可供选择。我们评测的每个框架——NextJS、ViteJS、Remix 和 Gatsby——都针对不同的用例提供了独特的优势。

• NextJS非常适合希望通过无缝 Vercel 集成构建服务器渲染应用程序的开发人员。
• ViteJS的性能非常出色，尤其是开发速度，对于优先考虑快速构建时间的项目来说是一个绝佳的选择。
• Remix为全栈应用程序提供了强大的解决方案，专注于高级路由、服务器端渲染和丰富的用户体验。
• Gatsby仍然是静态网站生成的有力竞争者，尤其是对于受益于其内置性能优化和 PWA 功能的内容密集型网站。

最终，框架的选择取决于您的具体项目需求——无论是性能、服务器端渲染、易于部署还是全栈功能。从 CRA 转向这些现代替代方案之一，可以极大地提升您的开发体验和项目成果。

我希望本文能帮助您了解可以在下一个项目中使用的 CRA 替代方案。