要跟上 JavaScript 架構的所有最新動態，可能會相當困難。本文件簡要介紹 JavaScript 架構生態系統在過去一年左右的最新動態。如要進一步瞭解其中部分主題，請參閱今年 Google I/O 大會的相關演講「Navigating the JavaScript Frameworks Ecosystem」。
架構趨勢和融合
如圖表所示，JavaScript 架構會聚焦於一些類似的功能和架構。這些功能包括以元件為基礎的架構、以檔案為基礎的路由，以及新型 SSR 支援。這項整合作業展現了生態系統的成熟度和演進過程，因為架構會互相學習並採用最佳做法。
同時，許多近期趨勢 (例如伺服器元件和精細回應的不同方法) 也持續讓個別架構有所區隔。為了進一步瞭解這些趨勢，我們將逐一探討這些趨勢。
Angular
Angular 近期的版本包含多項重大變更，包括信號、可延遲的檢視畫面、NgOptimziedImage、非破壞性重新整理和部分重新整理。以下列舉幾項重點功能：
- 信號：信號是多個架構 (包括現在的 Angular) 用來追蹤應用程式狀態的做法。Angular Signals 可減少變更偵測期間必須執行的運算次數，進而改善執行階段效能，包括Interaction to Next Paint (INP)。
- 可延遲的檢視畫面：可延遲的檢視畫面可延遲特定元件、指令和管道的載入作業。舉例來說，您可以延遲載入依附元件，直到內容進入檢視區或主執行緒閒置為止。
- NgOptimizedImage：NgOptimizedImage 是 Angular 的圖片元件，可自動採用圖片載入最佳做法。
- 非破壞性充填：非破壞性充填會修正在伺服器端轉譯的 Angular 應用程式 DOM 在用戶端重建時，可能發生的閃爍現象。
- 部分充填：Angular 團隊很快就會發布部分充填的開發人員預覽版。根據預設，在部分重新整理的情況下，瀏覽器在轉譯網頁時不會載入任何網頁的 JavaScript。而是在使用者與網頁互動時，才會重新載入網頁的特定部分。
天文攝影
Astro 是新一代的靜態網站建構工具，以創新的網頁開發方式引起一陣轟動。為了專注於效能和開發人員體驗，Astro 已發布多項令人期待的功能和更新：
- Astro Islands：Astro Islands 可讓開發人員建構與網頁其他部分隔離的互動式 UI 元件。這樣就能實現高效更新和最佳效能。
- 混合式轉譯：Astro 現已支援混合式轉譯，結合靜態網站產生和伺服器端轉譯的優點，提供更彈性的轉譯方式。
- 圖片和相片元件：Astro 推出了新的圖片和相片元件，可簡化圖片處理作業並提供自動最佳化功能。
- View Transitions 支援：Astro 內建 View Transitions API 支援功能，可提供流暢無縫的頁面轉場效果。
- Astro 開發人員工具列：Astro 開發人員工具列提供強大的工具組，可用於偵錯及改善 Astro 應用程式。
回應
去年，React Server 元件的發布版本為 React 元件引進了新方法。自那時起，React 團隊一直致力於開發各種新功能，包括 React Compiler 和伺服器動作功能，以及：
- 伺服器元件：React 伺服器元件會擷取資料，並在將資料串流傳送至用戶端前，先在伺服器上轉譯。這會將轉譯工作移至伺服器，並減少需要傳送至用戶端的程式碼量。
- React Compiler：React Compiler 是一種compiler，可自動快取元件。這麼做可減少不必要的重繪作業，進而改善效能。React 團隊表示，開發人員無須修改任何程式碼，即可採用 React Compiler。
- 伺服器動作：伺服器動作可啟用用戶端與伺服器之間的通訊。您可以使用伺服器動作定義伺服器端函式，直接從 React 元件叫用，無須手動呼叫 API 和複雜的狀態管理。這項功能對於資料變異和表單提交等操作特別實用。
- 素材資源載入：React 一直在開發宣告式 API，用於預先載入和載入指令碼、樣式、字型和圖片等素材資源。
- 螢幕外轉譯：React 也正在進行螢幕外轉譯。離屏算繪是「React 即將推出的功能，可在背景中算繪畫面，而不會產生額外的效能負擔。您可以將其視為內容可見度 CSS 屬性的其中一個版本，不僅適用於 DOM 元素，也適用於 React 元件。」
重混
Remix 是全堆疊網頁框架，在開發人員社群中越來越受歡迎。Remix 著重於網路基礎知識和提升開發人員體驗，因此推出了幾項值得注意的更新：
- Remix 2.0 版本：Remix 2.0 於 2023 年 9 月發布，為架構帶來重大改善和新功能。
- 支援 Vite 的穩定版：Remix 現已支援 Vite，這是一款快速輕量化的建構工具，可加快開發建構作業並提升效能。
- SPA 模式：Remix 推出了 SPA 模式，可讓您建構純粹的靜態網站，而不需要在實際工作環境中使用 JavaScript 伺服器。這可讓開發人員使用 Remix 的強大功能，例如以檔案為基礎的路由、自動程式碼分割等，同時保留靜態網站部署的簡易性。
Next.js
2023 年 5 月推出的 Next.js 13.4 版本特別值得注意，因為它為 React Server 元件、串流和 Suspense 帶來穩定支援。自那時起，Next.js 持續為新的 React API (例如 伺服器動作) 提供支援，並透過 Turbopack 等計畫改善開發人員體驗。其他亮點包括：
- 應用程式路由器：應用程式路由器在 Next.js 13.4 中已穩定，這是在 Next.js 應用程式中建立及管理路由的新方法。應用程式路由器是使用 Next.js 新功能 (例如共用版面配置和巢狀路由) 的必要條件，也是在 Next.js 應用程式中使用 React 新 API (例如 React 伺服器元件、懸置和伺服器動作) 的必要條件。
Turbopack：目前為實驗性質的網頁轉譯方法，建構於 React 的 Suspense API 之上。部分預先顯示會使用靜態載入殼層算繪網頁。不過，殼會為網頁中的動態內容留下「空白」，而這類內容會以非同步方式載入。這樣一來，您就能享有快取靜態頁面的效能優勢，同時仍可將動態資料納入頁面內容。
Vue
Vue 的最新版本 Vue 3.4 包含多項效能提升功能。Vue 目前也正在開發 Vue Vapor，這也是以效能為導向的產品。以下是這個空間的幾項重點：
- Vue 3.4 發布：功能包括「完全重寫的剖析器，速度提高一倍、SFC 編譯速度更快，以及重構的反應系統，可提升 重新運算效率」。
- Vue Vapor 模式：Vue 正在開發 Vapor 模式，這是一種可與 Vue 單一檔案元件搭配使用的自選、以效能為導向的編譯策略。Vapor 模式產生的程式碼效能比 Vue 編譯器目前產生的程式碼更高。此外，使用 Vapor 模式搭配所有元件，就不需要使用 Vue 虛擬 DOM (可縮減套件大小)。
- Vue 2 已達到 EOL：Vue 2 的 EOL 為 2023 年 12 月 31 日。不過，Vue 2 仍相當常見：約 50% 的 Vue npm 套件下載量都是 Vue 2。
Nuxt
Nuxt 即將推出 Nuxt 4。除了 Nuxt 在過去一年內頻繁發布架構外，Nuxt 模組生態系統也成長到近 220 個模組。這個領域近期的發展包括：
- Nuxt 3.x 版本：Nuxt 通常每月推出新的次要版本。這些版本的亮點包括支援 Vite 5、僅限伺服器和僅限用戶端的頁面、用戶端 Node.js 支援，以及原生網頁串流。 * Nuxt 模組：Nuxt 模組生態系統的亮點包括新 nuxt/fonts 模組的發布，以及 nuxt/image 和 Nuxt 開發人員工具 的 1.0 版發布。即將推出的模組版本將包含 nuxt/scripts、nuxt/hints、nuxt/a11y 和 nuxt/auth。
- 伺服器元件 (島嶼元件)：Nuxt 持續擴充對伺服器元件的支援 (目前為實驗功能)。在 Nuxt 中，這些由伺服器算繪的元件可用於靜態網站，可採用 Islands 架構。
固體
Solid 一直致力於推出穩定版 1.0 的SolidStart 元架構。SolidStart 提供精細的反應性、同構轉譯，並支援各種轉譯模式。主要包含：
- 精細的反應：Solid 的反應系統可提供精確的更新和最佳效能，實現高效的轉譯和狀態管理。
- 同構路由：SolidStart 提供統一的路由方法，讓開發人員定義在用戶端和伺服器上都能順暢運作的路由。
- 彈性的轉譯模式：SolidStart 支援各種轉譯模式，包括伺服器端轉譯、靜態網站產生和用戶端端轉譯，讓開發人員可以彈性選擇最適合應用程式的做法。
Svelte
過去一年，Svelte 團隊一直專注於即將推出的 Svelte 5，這將是重大版本。其他亮點包括：
- Svelte 5 即將推出：除了包含「Svelte 編譯器和執行階段的重寫」外，Svelte 5 也引入了Runes 的概念。
- Runes 功能推出：Runes 是 Svelte 5 即將推出的功能。「符文可解鎖通用、精細的回應性...有了 Runes，您可以超越 .svelte 檔案的範圍，Svelte 5 的回應性由信號提供，但 [與其他架構不同]，在 Svelte 5 中，信號是幕後實作細節，而非您直接互動的項目。」
- SvelteKit 2 發布：SvelteKit 是 Svelte 的元架構。這個版本的功能包括淺層路由和 Vite 5 支援。
Chrome Aurora
Chrome Aurora 是 Google 的一個團隊，與各種開放原始碼網頁架構合作，以改善網際網路的使用者體驗，尤其是效能。以下是我們在過去一年中參與的部分計畫：
- 圖片 (next/image、NgOptimizedImage 和 nuxt/image)
- 字型公用程式 (next/font、nuxt/fonts 和 unjs/fontaine (Vite 外掛程式)
- 指令碼載入 (next/script 和 nuxt/scripts)
- 第三方指令碼載入 (next/third-parties、nuxt/third-parties 和 Angular 的 YouTube 和 Google 地圖元件)
- 算繪：(Angular SSR/水合)
結論
JavaScript 架構生態系統持續快速發展，每個架構都會帶來一套創新和改善措施。無論您想瞭解 Angular、React 和 Vue 等成熟架構的最新功能，還是想探索 Astro、Remix 和 Solid 等新選擇，都有很多值得關注的進展。
開發人員若能掌握這些進展，就能在為專案選擇架構時做出明智的決定。瞭解各個架構的優點和獨特功能後，我們就能選出最符合專案需求和開發偏好的架構。
希望這份總覽能讓您一窺 JavaScript 架構的現況。如要進一步瞭解這篇網誌文章涵蓋的主題，請務必查看 Google I/O 的相關演講。祝您編寫程式一切順利！