想要跟上 JavaScript 框架的所有功能发展并非易事。本文档简要介绍了 JavaScript 框架生态系统在过去一年左右所发生的事件。如需对其中一些主题的更深入探讨，请查看今年 Google I/O 大会上与 Navigating JavaScript Frameworks Ecosystem（探索 JavaScript 框架生态系统）相关的演讲。
框架趋势和收敛
如图表所示，JavaScript 框架汇集了许多类似的功能和架构。其中包括基于组件的架构、文件级路由和现代 SSR 支持。这种融合表明了生态系统的成熟程度和演变，因为框架会相互学习并采用最佳实践。
同时，一些近期趋势（例如服务器组件和不同的精细反应方法）继续使各个框架与众不同。为帮助您更好地了解这些趋势，我们将逐一深入分析这些趋势。
Angular
Angular 的最新版本包含各种重大变更，包括信号、可延迟视图、NgOptimziedImage、非破坏性水合和部分水合。该版本的亮点包括：
- 信号：信号是一种可供多个框架（现在包括 Angular）用来跟踪应用中的状态的方法。Angular Signals 可以减少在检测更改期间必须执行的计算次数，从而提高运行时性能（包括 Interaction to Next Paint (INP)）。
- 可延迟视图：可延迟视图可用于延迟加载特定组件、指令和管道。例如，您可以推迟加载某个依赖项，直到内容进入视口或主线程空闲后再加载。
- NgOptimizedImage：NgOptimizedImage 是 Angular 的一个图片组件，可自动采用图片加载最佳做法。
- 无损水合：非破坏性水合功能修复了在客户端重新构建服务器端渲染的 Angular 应用的 DOM 时发生的闪烁问题。
- 部分水合：Angular 团队即将发布“部分水合”的开发者预览版。默认情况下，使用“部分水合”功能时，浏览器在呈现网页时不会加载该网页的任何 JavaScript。相反，当用户与网页互动时，网页的特定部分便会被水化。
Astro
Astro 是一家现代化的静态网站开发工具，它凭借其创新的 Web 开发方法掀起了热潮。Astro 注重性能和开发者体验，发布了多项激动人心的功能和更新：
- 阿斯特罗群岛：阿斯特罗群岛允许开发者构建与网页其余部分隔离的交互式界面组件。这样可以实现高效更新并实现最佳性能。
- 混合渲染：Astro 现在支持混合渲染，结合了静态网站生成和服务器端渲染的优势，以提高灵活性。
- Image 和 Picture 组件：Astro 引入了新的 Image 和 Picture 组件，以简化图片处理并提供自动优化功能。
- 视图转换支持：Astro 提供对 View Transitions API 的内置支持，可实现流畅、无缝的页面转换。
- Astro 开发者工具：Astro 开发者工具提供了一套功能强大的工具，用于调试和优化 Astro 应用。
回应
去年，React Server 组件的版本引入了一种新的 React 组件方法。从那时起，React 团队一直致力于开发各种新功能，包括 React 编译器和服务器操作功能，以及：
- 服务器组件：React 服务器组件是提取数据并在流式传输到客户端之前在服务器上渲染的组件。这会将渲染工作移至服务器，并减少需要传送到客户端的代码量。
- React 编译器：React Compiler 是一个可以自动记忆组件的编译器。这样可以减少不必要的重新渲染，从而提升性能。 React 团队表示，开发者无需更改任何代码即可采用 React 编译器。
- 服务器操作：服务器操作支持客户端到服务器通信。借助服务器操作，您可以定义可直接从 React 组件调用的服务器端函数，而无需手动调用 API 和进行复杂的状态管理。这对于数据更改和表单提交等操作特别有用。
- 资源加载：React 一直致力于开发用于预加载和加载脚本、样式、字体和图片等资源的声明式 API。
- 屏幕外呈现：React 也一直在研究屏幕外呈现。屏幕外渲染是 React 中即将推出的一项功能，用于在后台渲染屏幕，不会产生额外的性能开销。您可以将其视为内容可见性 CSS 属性的一个版本，不仅适用于 DOM 元素和 React 组件。”
混剪
Remix 是一种全栈 Web 框架，在开发者社区中获得越来越关注。Remix 专注于 Web 基础知识并增强开发者体验，在此基础上引入了几项重要更新：
- Remix 2.0 版本：Remix 2.0 于 2023 年 9 月发布，对框架进行了重大改进并新增了一些功能。
- 对 Vite 提供稳定支持：Remix 现在为 Vite 提供稳定支持。Vite 是一种快速轻量级的构建工具，可提供更快的开发 build 和更高的性能。
- SPA 模式：Remix 引入了 SPA 模式，该模式允许构建纯静态网站，而无需在生产环境中使用 JavaScript 服务器。这样，开发者便可以使用 Remix 的强大功能（例如基于文件的路由、自动代码拆分等），同时保持静态网站部署的简单性。
Next.js
2023 年 5 月发布的 Next.js 13.4 版本特别值得注意，因为它为 React Server 组件、流式传输和悬疑提供了稳定支持。此后，Next.js 继续为新的 React API（例如 Server Actions）提供支持，并通过 Turbopack 等计划对开发者体验进行迭代。其他亮点包括：
- 应用路由器：应用路由器在 Next.js 13.4 中变得稳定，是一种在 Next.js 应用中构建和管理路由的新方式。应用路由器是在 Next.js 应用中使用新 Next.js 功能（如共享布局和嵌套路由）以及新 React API（如 React Server 组件、Sspense 和服务器操作）的前提条件。
Turbopack：基于 React 的 Supense API 构建的网页渲染方法，目前尚处于实验阶段。部分预渲染会使用静态加载 shell 渲染网页。不过，shell 会为页面内的动态内容留出“空洞”，并且相应内容是异步加载的。这样做不仅可以提供可缓存的静态网页的性能优势，而且仍能将动态数据整合到网页内容中。
Vue
Vue 的最新版本 Vue 3.4 包含各种性能改进。Vue 目前还在开发 Vue Vapor，该产品还是以性能为导向的平台。以下是此空间中的一些重要变化：
- Vue 3.4 发布：功能包括“经过彻底重写的解析器，SFC 编译速度是速度的两倍；SFC 编译速度经过了重构，可提高 重新计算效率。”
- Vue Vapor Mode：Vue 正在启用 Vapor Mode，这是一种选择启用且面向性能的编译策略，可与 Vue 单个文件组件搭配使用。蒸气模式所生成的代码的性能会优于 Vue Compiler 当前生成的代码。此外，如果对所有组件使用蒸气模式，则无需再使用 Vue 虚拟 DOM（这会减小软件包大小）。
- Vue 2 达到服务终止：Vue 2 的服务终止 (EOL) 日期为 2023 年 12 月 31 日。不过，Vue 2 的使用仍然非常广泛：约有 50% 的 Vue npm 软件包下载内容用于 Vue 2。
坚果味
Nuxt 即将发布 Nuxt 4。除了 Nuxt 在过去一年中频繁发布的框架版本外，Nuxt 模块生态系统增长到近 220 个模块。这一领域的一些近期发展包括：
- Nuxt 3.x 版本：Nuxt 通常每月都会发布新的次要版本。这些版本的一些亮点包括对 Vite 5 的支持、仅限服务器的页面和客户端专用页面、客户端 Node.js 支持以及原生 Web 流。 * Nuxt 模块：Nuxt 模块生态系统的亮点包括发布了新的 nuxt/fonts 模块，以及 nuxt/image 和 Nuxt 开发者工具的 1.0 版本。即将发布的模块版本将包括 nuxt/scripts、nuxt/hints、nuxt/a11y 和 nuxt/auth。
- 服务器组件（岛屿组件）：Nuxt 继续构建对服务器组件（目前为实验性）的支持。在 Nuxt 中，这些由服务器渲染的组件可在静态网站中使用，支持采用岛屿架构。
固体
Solid 一直致力于为其元框架 SolidStart 打造稳定版 1.0 版本。SolidStart 具有精细的响应性、同态路由，并支持各种渲染模式。其特点包括：
- 精细的响应性：Solid 的反应性系统可实现精确更新和最佳性能，从而实现高效的渲染和状态管理。
- 同态路由：SolidStart 提供了一种统一的路由方法，使开发者能够定义在客户端和服务器上无缝工作的路由。
- 灵活的渲染模式：SolidStart 支持各种渲染模式，包括服务器端渲染、静态网站生成和客户端渲染，让开发者能够灵活地选择适合其应用的最佳方法。
丝绒
在过去的一年中，Svelte 团队一直专注于即将发布的 Svelte 5 版本，此版本非常重要。其他亮点包括：
- Svelte 5 即将发布：除了“重写 Svelte 编译器和运行时”，Svelte 5 还引入了Runes的概念。
- 已公布 Rune：Runes 是 Svelte 5 中即将推出的功能。“运行符可以解锁通用、精细的反应... 借助符文，响应能力可以超越 .svelte 文件的边界... Svelte 5 的响应性由信号提供支持。但是，[与其他框架不同]，在 Svelte 5 中，信号是底层的实现细节，而不是您直接交互的内容。”
- 发布了 SvelteKit 2：SvelteKit 是 Svelte 的元框架。此版本中的功能包括浅层路由和对 Vite 5 的支持。
Chrome 极光
Chrome Aurora 是 Google 的一个团队，他们与各种开源 Web 框架开展协作，以改善网络上的用户体验，尤其是性能。以下是我们在过去一年中所做的一些举措：
- 图片（next/image、NgOptimizedImage 和 nuxt/image）
- 字体实用程序（next/font、nuxt/fonts 和 unjs/fontaine（Vite 插件））
- 脚本加载（next/script 和 nuxt/scripts）
- 第三方脚本加载（next/third-partyies、nuxt/third-partyies 以及 Angular 的 YouTube 和 Google 地图组件）
- 渲染：(Angular SSR/hydration)
总结
JavaScript 框架生态系统继续快速发展，每个框架都带来自己的一组创新和改进。无论您是对 Angular、React 和 Vue 等成熟框架的最新功能感兴趣，还是想要探索 Astro、Remix 和 Solid 等较新的功能，都可以跟上令人兴奋的开发项目。
作为开发者，在为项目选择框架时，及时了解这些进展有助于我们做出明智的决策。了解每个框架的优势和独特功能后，我们可以选择最符合我们的项目要求和开发偏好的框架。
我们希望此概览可让您大致了解 JavaScript 框架的现状。如需深入了解本博文中介绍的主题，请务必观看 Google I/O 大会的演讲。乐享编码！