一文了解React、Next.js、Vue、Nuxt和Svelte等框架的最新動(dòng)態(tài)和趨勢(shì)

一起來(lái)看看谷歌I/O大會(huì)的一篇演講：關(guān)于JavaScript框架生態(tài)系統(tǒng)的概述，內(nèi)容涵蓋Angular、Astro、React、Remix、Next.js、Vue、Nuxt、Solid和Svelte等多個(gè)框架的最新動(dòng)態(tài)和趨勢(shì)。

在過(guò)去的一年左右的時(shí)間里，JavaScript框架生態(tài)圈發(fā)生了許多變化。這份文檔簡(jiǎn)要概述了近期的一些亮點(diǎn)。想要更深入討論這些話題，可以查看今年Google I/O大會(huì)上的JavaScript框架生態(tài)導(dǎo)航演講。

框架趨勢(shì)與融合

如圖表所示，JavaScript框架正在向一些相似的功能和架構(gòu)靠攏。這些包括基于組件的架構(gòu)、基于文件的路由和現(xiàn)代的服務(wù)器端渲染（SSR）支持。這種融合表明了生態(tài)系統(tǒng)的成熟和演變，因?yàn)榭蚣軅兓ハ鄬W(xué)習(xí)并采納最佳實(shí)踐。

與此同時(shí)，一些新趨勢(shì)（如服務(wù)器組件和對(duì)細(xì)粒度反應(yīng)性的不同方法）繼續(xù)使各個(gè)框架保持獨(dú)特性。為了更好地理解這些趨勢(shì)，我們將逐一深入探討每個(gè)框架。

Angular

Angular最近的版本包含了多項(xiàng)重大變化，包括信號(hào)（Signals）、可延遲視圖（Deferrable views）、NgOptimizedImage、非破壞性水合（Non-destructive hydration）和部分水合（Partial hydration）。一些亮點(diǎn)包括：

• 信號(hào)（Signals）：信號(hào)是多個(gè)框架（包括現(xiàn)在的Angular）用于跟蹤應(yīng)用程序狀態(tài)的方法。Angular信號(hào)可以通過(guò)減少變更檢測(cè)期間必須進(jìn)行的計(jì)算數(shù)量，提高運(yùn)行時(shí)性能，包括交互到下一次繪制（INP）。
• 可延遲視圖：可延遲視圖使得可以推遲特定組件、指令和管道的加載。例如，你可以推遲加載一個(gè)依賴(lài)項(xiàng)，直到內(nèi)容進(jìn)入視口或直到主線程空閑。
• NgOptimizedImage：NgOptimizedImage是Angular的圖像組件，它自動(dòng)化了圖像加載的最佳實(shí)踐采用。
• 非破壞性水合：非破壞性水合修復(fù)了服務(wù)器端渲染的Angular應(yīng)用程序的DOM在客戶(hù)端重建時(shí)會(huì)發(fā)生的閃爍問(wèn)題。
• 部分水合：Angular團(tuán)隊(duì)很快將發(fā)布部分水合的開(kāi)發(fā)者預(yù)覽版。有了部分水合，默認(rèn)情況下，瀏覽器在頁(yè)面渲染時(shí)不會(huì)加載頁(yè)面的任何JavaScript。相反，頁(yè)面的特定部分會(huì)在用戶(hù)與頁(yè)面交互時(shí)被水合。

Astro

Astro，一個(gè)現(xiàn)代的靜態(tài)網(wǎng)站構(gòu)建器，以其創(chuàng)新的Web開(kāi)發(fā)方法引起了轟動(dòng)。Astro專(zhuān)注于性能和開(kāi)發(fā)者體驗(yàn)，發(fā)布了許多令人興奮的特性和更新：

• Astro Islands：Astro Islands允許開(kāi)發(fā)者構(gòu)建與頁(yè)面其余部分隔離的交互式UI組件。這可以實(shí)現(xiàn)高效的更新和最佳性能。
• 混合渲染：Astro現(xiàn)在支持混合渲染，結(jié)合了靜態(tài)站點(diǎn)生成和服務(wù)器端渲染的優(yōu)勢(shì)，提供了增強(qiáng)的靈活性。
• 圖像和圖片組件：Astro引入了新的圖像和圖片組件，簡(jiǎn)化了圖像的處理并提供了自動(dòng)優(yōu)化。
• 視圖轉(zhuǎn)換支持：Astro提供了內(nèi)置的視圖轉(zhuǎn)換API支持，實(shí)現(xiàn)平滑無(wú)縫的頁(yè)面轉(zhuǎn)換。
• Astro開(kāi)發(fā)工具欄：Astro開(kāi)發(fā)工具欄為調(diào)試和優(yōu)化Astro應(yīng)用程序提供了強(qiáng)大的工具集。

React

去年，React Server Components的發(fā)布引入了React組件的新方法。從那時(shí)起，React團(tuán)隊(duì)一直在開(kāi)發(fā)包括React編譯器和服務(wù)器操作在內(nèi)的多種新功能，以及：

• 服務(wù)器組件：React服務(wù)器組件是在服務(wù)器上獲取數(shù)據(jù)并渲染的組件，然后才流式傳輸?shù)娇蛻?hù)端。這將渲染工作轉(zhuǎn)移到服務(wù)器，并減少了需要傳輸?shù)娇蛻?hù)端的代碼量。
• React編譯器：React編譯器是一個(gè)編譯器，可以自動(dòng)記憶化組件。通過(guò)減少不必要的重新渲染，提高了性能。React團(tuán)隊(duì)表示，開(kāi)發(fā)者可以在不進(jìn)行任何代碼更改的情況下采用React編譯器。
• 服務(wù)器操作：服務(wù)器操作啟用了客戶(hù)端到服務(wù)器的通信。有了服務(wù)器操作，你可以定義可以直接從你的React組件調(diào)用的服務(wù)器端函數(shù)，消除了手動(dòng)API調(diào)用和復(fù)雜狀態(tài)管理的需要。這對(duì)于數(shù)據(jù)突變和表單提交等事情特別有用。
• 資源加載：React一直在開(kāi)發(fā)用于預(yù)加載和加載資源（如腳本、樣式、字體和圖像）的聲明式API。
• 離屏渲染：React還在開(kāi)發(fā)離屏渲染。離屏渲染是React中的一個(gè)即將到來(lái)的功能，用于在不增加額外性能開(kāi)銷(xiāo)的情況下在后臺(tái)渲染屏幕。你可以將其視為content-visibility CSS屬性的一個(gè)版本，它不僅適用于DOM元素，也適用于React組件。

Remix

Remix，一個(gè)全棧Web框架，在開(kāi)發(fā)者社區(qū)中越來(lái)越受歡迎。Remix專(zhuān)注于Web基礎(chǔ)和增強(qiáng)的開(kāi)發(fā)者體驗(yàn)，引入了幾個(gè)值得注意的更新：

• Remix 2.0發(fā)布：2023年9月發(fā)布的Remix 2.0為框架帶來(lái)了重大改進(jìn)和新功能。
• Vite的穩(wěn)定支持：Remix現(xiàn)在提供對(duì)Vite的穩(wěn)定支持，Vite是一個(gè)快速且輕量級(jí)的構(gòu)建工具，提供更快的開(kāi)發(fā)構(gòu)建和改進(jìn)的性能。
• SPA模式：Remix引入了SPA模式，允許構(gòu)建純靜態(tài)站點(diǎn)，而無(wú)需在生產(chǎn)中使用JavaScript服務(wù)器。這使開(kāi)發(fā)者能夠使用Remix的強(qiáng)大功能，如基于文件的路由、自動(dòng)代碼分割等，同時(shí)保持靜態(tài)站點(diǎn)部署的簡(jiǎn)單性。

Next.js

2023年5月發(fā)布的Next.js 13.4特別值得注意，因?yàn)樗肓藢?duì)React Server Components、流式傳輸和Suspense的穩(wěn)定支持。從那時(shí)起，Next.js繼續(xù)構(gòu)建對(duì)新React API的支持（例如，服務(wù)器操作），并通過(guò)Turbopack等計(jì)劃迭代開(kāi)發(fā)者體驗(yàn)。其他亮點(diǎn)包括：

• App Router：在Next.js 13.4中變得穩(wěn)定的App Router是Next.js應(yīng)用程序中結(jié)構(gòu)化和管理路由的新方式。App Router是使用新Next.js功能（如共享布局和嵌套路由）以及在Next.js應(yīng)用程序中使用新React API（如React Server Components、Suspense和服務(wù)器操作）的先決條件。
• Turbopack：（目前實(shí)驗(yàn)性）頁(yè)面渲染的方法，建立在React的Suspense API之上。部分預(yù)渲染使用靜態(tài)加載殼渲染頁(yè)面。然而，該殼為頁(yè)面內(nèi)的動(dòng)態(tài)內(nèi)容留下了“洞”，這些內(nèi)容是異步加載的。這提供了可緩存的靜態(tài)頁(yè)面的性能優(yōu)勢(shì)，同時(shí)仍能將動(dòng)態(tài)數(shù)據(jù)融入頁(yè)面內(nèi)容。

Vue

Vue最近的發(fā)布，Vue 3.4，包括了多種性能改進(jìn)。Vue還在開(kāi)發(fā)Vue Vapor，這也是面向性能的。以下是這個(gè)領(lǐng)域的一些亮點(diǎn)：

• Vue 3.4發(fā)布：功能包括“完全重寫(xiě)的解析器，速度提高了一倍，更快的SFC編譯，以及重構(gòu)的反應(yīng)系統(tǒng)，提高了重新計(jì)算的效率。”
• Vue Vapor模式：Vue正在開(kāi)發(fā)Vapor模式，這是一種面向性能的可選編譯策略，適用于Vue單文件組件。Vapor模式生成的代碼比Vue編譯器當(dāng)前生成的代碼更高效。此外，使用Vapor模式的所有組件消除了對(duì)Vue虛擬DOM的需求（這減少了捆綁包大小）。
• Vue 2達(dá)到生命周期終點(diǎn)：Vue 2的生命周期終點(diǎn)（EOL）是2023年12月31日。然而，Vue 2仍然相當(dāng)廣泛地被使用：約50%的Vue npm包下載是針對(duì)Vue 2的。

Nuxt

Nuxt即將發(fā)布Nuxt 4。除了Nuxt在過(guò)去一年中頻繁的框架發(fā)布外，Nuxt模塊生態(tài)系統(tǒng)已經(jīng)增長(zhǎng)到近220個(gè)模塊。這個(gè)領(lǐng)域的一些最新發(fā)展包括：

• Nuxt 3.x發(fā)布：Nuxt通常每月發(fā)布新的次要版本。這些版本中的一些亮點(diǎn)包括對(duì)Vite 5的支持，服務(wù)器端和客戶(hù)端頁(yè)面，客戶(hù)端Node.js支持，和原生Web流。
• Nuxt Modules：Nuxt模塊生態(tài)系統(tǒng)的亮點(diǎn)包括發(fā)布新的nuxt/fonts模塊，以及nuxt/image和Nuxt DevTools的1.0版本發(fā)布。即將發(fā)布的模塊將包括nuxt/scripts, nuxt/hints, nuxt/a11y, 和 nuxt/auth。
• 服務(wù)器組件（islands components）：Nuxt繼續(xù)擴(kuò)展對(duì)服務(wù)器組件的支持（目前是實(shí)驗(yàn)性的）。在Nuxt中，這些服務(wù)器渲染的組件可以在靜態(tài)站點(diǎn)中使用——使Islands Architecture的采用成為可能。

Solid

Solid 一直在致力于SolidStart這個(gè)元框架的穩(wěn)定1.0版本發(fā)布。SolidStart以其細(xì)粒度反應(yīng)性、同構(gòu)路由和對(duì)多種渲染模式的支持而自豪。亮點(diǎn)包括：

• 細(xì)粒度反應(yīng)性：Solid的反應(yīng)性系統(tǒng)允許精確更新和最佳性能，實(shí)現(xiàn)高效的渲染和狀態(tài)管理。
• 同構(gòu)路由：SolidStart提供了統(tǒng)一的路由方法，允許開(kāi)發(fā)者定義在客戶(hù)端和服務(wù)器上無(wú)縫工作的路由。
• 靈活的渲染模式：SolidStart支持各種渲染模式，包括服務(wù)器端渲染、靜態(tài)站點(diǎn)生成和客戶(hù)端渲染，為開(kāi)發(fā)者提供了選擇最佳方法的靈活性。

Svelte

在過(guò)去一年中，Svelte團(tuán)隊(duì)一直專(zhuān)注于即將發(fā)布的Svelte 5，這將是一個(gè)重大更新。其他亮點(diǎn)包括：

• Svelte 5即將到來(lái)：除了包括一個(gè)"重寫(xiě)的Svelte編譯器和運(yùn)行時(shí)"，Svelte 5還引入了Runes的概念。
• Runes宣布：Runes是Svelte 5中即將推出的一個(gè)功能。"Runes解鎖了普遍的細(xì)粒度反應(yīng)性...有了Runes，反應(yīng)性超越了你的 .svelte 文件的界限...Svelte 5的反應(yīng)性由信號(hào)驅(qū)動(dòng) - 然而，[與其他框架不同]，在Svelte 5中，信號(hào)是一個(gè)幕后實(shí)現(xiàn)細(xì)節(jié)，而不是你直接交互的東西。"
• SvelteKit 2發(fā)布：SvelteKit是Svelte的元框架。此版本中的功能包括淺路由和對(duì)Vite 5的支持。

Chrome Aurora

Chrome Aurora是Google的一個(gè)團(tuán)隊(duì)，與各種開(kāi)源Web框架合作，改善用戶(hù)體驗(yàn)——特別是跨Web的性能。以下是我們?cè)谶^(guò)去一年中貢獻(xiàn)的一些倡議：

• 圖像（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 Maps組件）
• 渲染：(Angular SSR / 水合)

結(jié)論

JavaScript框架生態(tài)圈以迅猛的速度持續(xù)發(fā)展，每個(gè)框架都帶來(lái)了自己的創(chuàng)新和改進(jìn)。無(wú)論你對(duì)Angular、React和Vue等成熟框架的最新特性感興趣，還是探索Astro、Remix和Solid等新選項(xiàng)，都有很多令人興奮的發(fā)展值得關(guān)注。

作為開(kāi)發(fā)者，了解這些進(jìn)步有助于我們?cè)谶x擇項(xiàng)目框架時(shí)做出明智的決策。通過(guò)理解每個(gè)框架的優(yōu)勢(shì)和獨(dú)特特性，我們可以選擇最符合項(xiàng)目需求和開(kāi)發(fā)偏好的框架。

希望這份概覽能讓你對(duì)當(dāng)前JavaScript框架的狀態(tài)有所了解。要深入了解這篇博客文章中涵蓋的主題，請(qǐng)務(wù)必查看Google I/O的配套演講。祝你編碼愉快！

參考鏈接：https://developer.chrome.com/blog/frameworks-may-2024

最后，如果你覺(jué)得寶哥的分享還算實(shí)在，就給我點(diǎn)個(gè)贊，關(guān)注一波。分享出去，也許你的轉(zhuǎn)發(fā)能給別人帶來(lái)一點(diǎn)啟發(fā)。

關(guān)注我，加星標(biāo)，明天見(jiàn)！