頂級 React 框架對比，Vite 完美勝出？
很多人的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 框架。
Component Tree
NextJS 一直是我首選的 CRA 替代方案。我用它也有很長時間了。隨著一次次的更新，NextJS 在不斷地改進。
輕輕松松地，使用 Nextjs，開發人員便能夠大展手腳了。
特性：
- 服務器端渲染：可使用 SSR 提高性能，通過預渲染頁面加快加載時間。
- API 路由：可通過 API 路由在 NextJS 中集成全棧開發。
- 自動代碼切分：遵循推薦的項目結構，具有更好的代碼切分，提高了性能。
- 與 Vercel 輕松集成：NextJS 由 Vercel 團隊構建。因此，使用 Vercel 進行部署輕而易舉。
最適合構建與服務器沒有集成（或很少與服務器集成）的無服務器應用程序。
SSR：服務器端渲染（SSR）是一種 web 應用程序渲染技術，每次用戶請求頁面時，都會在服務器上生成頁面的 HTML。
ViteJS
時刻準備著追趕沖鋒的開發環境。哈哈~
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 轉向這些現代替代方案可以大大增強開發體驗，加速收獲項目成果。
