很多人的React 之旅，是從 CRA（create-react-app）庫(kù)開(kāi)始的。

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

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

• 與其他產(chǎn)品相比，構(gòu)建時(shí)間更慢
• 對(duì)生成自定義的控制局限
• 缺少服務(wù)器端渲染（SSR）
• 過(guò)時(shí)，因?yàn)樽?2021 年以來(lái) CRA 再?zèng)]重大更新。

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

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

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

這些頂級(jí) React 框架絕對(duì)不容錯(cuò)過(guò)。一起來(lái)看看吧。

Next JS

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

Component Tree

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

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

特性：

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

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

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

ViteJS

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

ViteJS

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

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

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

特性：

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

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

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

Remix

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

圖片

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

特性：

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

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

Gatsby

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

圖片

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

特性：

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

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

性能比較

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

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

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

圖片

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

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

構(gòu)建時(shí)間

圖片

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

部署時(shí)間

圖片

所有框架都部署在 vercel 上。

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

FCP - 桌面

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

結(jié)論

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

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

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

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