很多人的React 之旅，是從 CRA（create-react-app）庫開始的。

但時至今日，我們發(fā)現(xiàn)，通過 CRA 構(gòu)建項目來學(xué)習(xí) React，卻并不是一個好點子了。

為什么呢？我們拒絕 CRA 的一些原因如下：

• 與其他產(chǎn)品相比，構(gòu)建時間更慢
• 對生成自定義的控制局限
• 缺少服務(wù)器端渲染（SSR）
• 過時，因為自 2021 年以來 CRA 再沒重大更新。

反之，從傳統(tǒng) CRA 切換到現(xiàn)代 React 框架則有眾多好處：可以提供更多功能；可以根據(jù)需求，例如 SSR、性能等提供多種選擇。

今天，我們將介紹一些我們大家可以使用來代替 CRA 的最佳替代方案，具體涉及：

• 替代方案的功能和最適合哪種應(yīng)用開發(fā)
• 一些性能指標(biāo)，例如開發(fā)服務(wù)器時間、構(gòu)建時間、部署時間和首次內(nèi)容繪制（FCP）。

這些頂級 React 框架絕對不容錯過。一起來看看吧。

Next JS

Next.js by Vercel 是面向 web 的全棧 React 框架。

Component Tree

NextJS 一直是我首選的 CRA 替代方案。我用它也有很長時間了。隨著一次次的更新，NextJS 在不斷地改進(jìn)。

輕輕松松地，使用 Nextjs，開發(fā)人員便能夠大展手腳了。

特性：

• 服務(wù)器端渲染：可使用 SSR 提高性能，通過預(yù)渲染頁面加快加載時間。
• API 路由：可通過 API 路由在 NextJS 中集成全棧開發(fā)。
• 自動代碼切分：遵循推薦的項目結(jié)構(gòu)，具有更好的代碼切分，提高了性能。
• 與 Vercel 輕松集成：NextJS 由 Vercel 團(tuán)隊構(gòu)建。因此，使用 Vercel 進(jìn)行部署輕而易舉。

最適合構(gòu)建與服務(wù)器沒有集成（或很少與服務(wù)器集成）的無服務(wù)器應(yīng)用程序。

SSR：服務(wù)器端渲染（SSR）是一種 web 應(yīng)用程序渲染技術(shù)，每次用戶請求頁面時，都會在服務(wù)器上生成頁面的 HTML。

ViteJS

時刻準(zhǔn)備著追趕沖鋒的開發(fā)環(huán)境。哈哈~

ViteJS

Vite 在構(gòu)建項目時，更注重快速、加載時間更短的性能。

與 Webpack 等傳統(tǒng)捆綁器相比，Vite 使用的開發(fā)服務(wù)器無需捆綁整個應(yīng)用程序，即可提供近乎即時的熱模塊替換（HMR）。

更快，更強(qiáng)，更高效。

特性：

• 更快的開發(fā)服務(wù)器：借助本機(jī) ES 模塊和現(xiàn)代瀏覽器功能，提供了更快的開發(fā)服務(wù)器。
• 豐富的插件支持：Vite 具有靈活的插件支持?？奢p松集成插件來擴(kuò)展 Vite 的功能。
• 優(yōu)化的構(gòu)建過程：實現(xiàn)了構(gòu)建時 tree shaking、代碼拆分和其他性能增強(qiáng)。
• SSR 和 SSG：Vite 還支持服務(wù)器端渲染和靜態(tài)站點生成。

Vite 最適合開發(fā)性能更優(yōu)越的博客網(wǎng)站。

SSG：靜態(tài)站點生成（SSG）是一種在構(gòu)建時預(yù)呈現(xiàn)網(wǎng)站 HTML 頁面的方法，可為每個頁面生成靜態(tài) HTML 文件。

Remix

Remix 是一個全棧式 web 框架，專注于用戶界面，背靠 web 標(biāo)準(zhǔn)，提供快速、流暢且有彈性的用戶體驗。

圖片

Remix 專注于構(gòu)建更優(yōu)的用戶體驗，可用于構(gòu)建全棧應(yīng)用程序。如果你熟悉 Rails 和 Laravel 這樣的服務(wù)器端 MVC web 框架，那么 Remix 就是 View 和 Controller。

特性：

• 數(shù)據(jù)加載：使用加載器在渲染頁面之前在服務(wù)器上獲取數(shù)據(jù)。
• 輕松路由：提供基于文件的路由系統(tǒng)。可根據(jù)創(chuàng)建目錄提供路由。NextJS 也支持此功能。
• 服務(wù)器端渲染：支持 SSR。
• 表單和操作：內(nèi)置對表單處理和操作的支持。有助于高效管理表單提交和操作。

最適合構(gòu)建需要高級路由、SSR 和注重性能的項目。

Gatsby

Gatsby 是一個基于 React 的開源框架，重視性能、可擴(kuò)展性和安全性。

圖片

Gatsby 是另一個基于 React 的框架，專注于構(gòu)建快速、安全和優(yōu)化的網(wǎng)站。主要用于創(chuàng)建靜態(tài)站點，也通過 API 和集成支持動態(tài)內(nèi)容。

特性：

• 服務(wù)器端生成：SSG 支持 Gatsby 可將內(nèi)容預(yù)渲染為靜態(tài) HTML 文件。
• 漸進(jìn)式 web 應(yīng)用：Gatsby 具有內(nèi)置的 PWA 功能，可通過本機(jī)應(yīng)用般的功能實現(xiàn)快速、離線就緒的 web 體驗。
• JAMstack：JavaScript、API 和 Markup 允許通過從 CDN 提供靜態(tài)文件和使用 API 來構(gòu)建網(wǎng)站。
• 內(nèi)容管理系統(tǒng)：充當(dāng) Gatsby 的內(nèi)容后端，Gatsby 將創(chuàng)作的內(nèi)容提取到靜態(tài)站點構(gòu)建進(jìn)程中。

最適合通過 Gatsby 使用內(nèi)容管理系統(tǒng)構(gòu)建博客了。

性能比較

在詳細(xì)介紹了每個框架之后，現(xiàn)在讓我們來看一下它們的性能指標(biāo)，例如開發(fā)服務(wù)器啟動、構(gòu)建時間、部署時間和首次內(nèi)容繪制所需要花費的時間。

我嘗試著在每個框架中創(chuàng)建相同的項目，這個 CSS 動畫包含圖像和 JSX 元素。

開發(fā)服務(wù)器

圖片

注：框架旁的數(shù)字是所花費的時間，單位為秒。

正如你在圖表中看到的，ViteJS 運行服務(wù)器的速度那是相當(dāng)?shù)目?，?Gatsby 最慢。這也是 ViteJS 敢聲稱自己是最快框架之一的原因。

構(gòu)建時間

圖片

我們發(fā)現(xiàn)，ViteJs 也是完成構(gòu)建過程最快的。Gatsby 的構(gòu)建時間倒數(shù)第一。而 NextJS 與 Gatsby 慢得半斤八兩。

部署時間

圖片

所有框架都部署在 vercel 上。

Vite 最快，12 秒，NextJS 和 Gatsby 最慢。Remix 在所有指標(biāo)中都保持著第二的位置。

FCP - 桌面

這次神奇了，Nextjs 和 Gatsby 最快，ViteJs 和 Remix 最慢。但話說回來，它們之間差異很小，只相差 0.1 秒。

結(jié)論

總之，雖然 Create React App（CRA）對許多開發(fā)人員來說是一個很好的起點，但現(xiàn)在我們有了更高級、功能更豐富的替代方案：NextJS、ViteJS、Remix 和 Gatsby ，這些框架每一個都具有針對不同用例量身定制的獨特優(yōu)勢。

• NextJS 非常適合用于通過無縫 Vercel 集成構(gòu)建服務(wù)器渲染的應(yīng)用程序。
• ViteJS 的性能非常出色，尤其是在開發(fā)速度方面，是優(yōu)先考慮快速構(gòu)建時間的絕佳選擇。
• Remix 為全棧應(yīng)用程序提供了強(qiáng)大的解決方案，專注于高級路由、服務(wù)器端渲染和豐富的用戶體驗。
• Gatsby 仍然是靜態(tài)站點生成的有力競爭者，尤其是對于受益于內(nèi)置性能優(yōu)化和 PWA 功能的內(nèi)容密集型站點。

總而言之，框架的選擇取決于特定的項目需求，取決于你需要性能、服務(wù)器端渲染、易于部署還是全棧功能。

從 CRA 轉(zhuǎn)向這些現(xiàn)代替代方案可以大大增強(qiáng)開發(fā)體驗，加速收獲項目成果。