盘点2023年前端大事件

Astro 更新

Astro 是一个现代化的轻量级静态站点生成器，用于构建以内容为中心的高性能网站。

2023年，Astro 发布了两个主要版本，第三个主要版本已经在路上了。

• 1 月 24 日，Astro 2.0 发布，更新内容如下：

• Markdown 和 MDX 的自动类型安全；
• 支持静态渲染和动态渲染。
• 重新设计的错误界面。
• 改进的开发服务器 (HMR)。
• 支持 Vite 4.0。

• 8 月 30 日，Astro 3.0 发布，更新内容如下：
• 图片优化（稳定版）：已取消标志，并且比以往更好。
• 更快的渲染性能：Astro 组件的渲染速度提高了 30-75%。
• 用于 Serverless 的 SSR 改进：与托管平台连接的新方式。
• 用于 JSX 的热更新改进：支持 React 和 Preact 的快速刷新。
• 优化的构建输出：更干净、更高效的 HTML。
• 11 月 28 日，Astro 4.0 Beta 发布

CSS 支持嵌套语法

主流浏览器的最新版本都已经支持 CSS 嵌套语法。

对于以下 CSS 样式：

table.colortable td {
  text-align:center;
}

table.colortable td.c {
  text-transform:uppercase;
}

table.colortable td:first-child, table.colortable td:first-child+td {
  border:1px solid black;
}

table.colortable th {
  text-align:center;
  background:black;
  color:white;
}

使用嵌套：

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

React 纪录片发布

2 月 11 日，Honeypot 发布了期待已久的 React 记录片，记录了 React 的发展历程。React 纪录片主要内容如下：

• 早期，当 Jordan Walke 试图说服 Facebook 的一小群工程师时，他有一个解决方案可以改善用户界面并显着缩短实施变更的时间。
• Facebook 的工程团队不得不面对的第一个困难，以及收购 Instagram 对 React 项目的意义。
• 当 Tom Occhino 和 Jordan Walke 在 2013 年的美国 JS 会议上展示新框架时，JavaScript 社区出乎意料的做出了负面反应。
• “早期使用者”如何帮助开源 React 更上一层楼。Sophie Alpert 成为团队一员的那一刻，以及 React 对 JS 社区的“重新介绍”。
• Netflix 是如何成为第一家采用 React 的大型科技公司的。
• JS 社区在构建今天的框架方面发挥了关键作用。
• Dan Abramov 和 Andrew Clark 加入了 React 团队。

Rspack 发布

3 月 10 日，字节跳动自研 Web 构建工具 Rspack 正式发布。Rspack 是由 ByteDance Web Infra 团队孵化的基于 Rust 语言开发的 Web 构建工具，拥有高性能、兼容 Webpack 生态、定制性强等多种优点，解决了我们在业务场景中遇到的非常多的问题，让很多开发者的体验有了质的提升。

Rspack 的特性如下：

• 启动速度极快：基于 Rust，项目启动速度极快，带给你极致的开发体验。
• 闪电般的 HMR：内置增量编译机制，HMR 速度极快，完全胜任大型项目的开发。
• 兼容 webpack：针对 webpack 的架构和生态进行兼容，无需从头搭建生态。
• 内置常见构建能力：对 Typescript、JSX、CSS、CSS Modules、Sass 等提供开箱即用的支持。
• 默认生产优化：默认内置多种优化策略，如 Tree Shaking、代码压缩等等。
• 框架无关：不和任何前端框架绑定，保证足够的灵活性。

TypeScript 更新

2023 年，TypeScript 发布了一个主要版本，三个次要版本：

• 3 月 17 日，TypeScript 5.0 发布，更新内容如下：

• 全新装饰器
• const 类型参数
• extends 支持多配置文件
• 所有枚举都是联合枚举
• --moduleResolutionbundler
• 自定义解析标志
• --verbatimModuleSyntax
• 支持 export type *
• JSDoc 支持 @satisfies
• JSDoc 支持 @overload
• 编辑器中不区分大小写的导入排序
• 完善 switch/case
• 优化速度、内存和包大小

• 6 月 1 日，TypeScript 5.1 发布，更新内容如下：
• 改进函数返回值类型 undefined 的类型推断
• getter和setter支持设置不同类型
• JSX 元素和 JSX 标签类型之间解耦类型检查
• 带命名空间的 JSX 标签
• typeRoots在模块解析中被查询
• JSX 标签支持链接光标
• @Param JSDoc 标签中支持代码补全
• 8 月 22 日，TypeScript 5.2 发布，更新内容如下：
• 支持显式资源管理
• 装饰器元数据
• 命名和匿名元组元素
• 联合类型数组方法调用
• 对象成员的逗号自动补全
• 内联变量重构
• 重大变更和正确性修复
• 11 月 14 日，TypeScript 5.3 发布， 更新内容如下：
• 导入属性
• 导入类型中稳定支持 resolution-mode
• 所有模块模式均支持 resolution-mode
• switch (true) 缩小范围
• 对布尔值进行比较的缩小范围
• 通过 Symbol.hasInstance 进行 instanceof 类型缩小
• 实例字段上的 super 属性访问检查
• 嵌入提示支持跳转到类型的定义
• 通过跳过 JSDoc 解析进行优化
• 通过比较非标准交集进行优化
• 整合 tsserverlibrary.js 和 typescript.js

React 推出全新官方文档

3 月 17 日，在 React 新文档的 Beta 版上线一年之后，React 终于正式发布了全新的 React 官方文档！新文档已启用新的域名：https://react.dev/。

新文档主要包含以下部分：

• 教程和指南：提供了大量的教程和指南，帮助开发者从零开始学习React或深入研究特定主题。
• 代码示例和演示：提供了一系列的代码示例和演示，展示了React的强大和灵活性。
• 最佳实践和技巧：了解最新的 React 最佳实践和技巧，学习如何优化代码以实现更好的性能。
• 社区论坛：与其他 React 开发人员联系，在项目中获得帮助或在社区分享专业知识。
• 新闻和更新：第一时间了解 React 开发团队的最新版本、更新和新闻。

Electeon 更新

2023 年，跨平台桌面应用开发工具 Electron 发布了四个主要版本：

• 4 月 4 日， Electron 发布 24.0.0
• 5 月 30 日，Electron 发布 25.0.0
• 8 月 15 日，Electron 发布 26.0.0
• 10 月 10 日，Electron 发布 27.0.0

Chrome 发布 WebGPU

经过多年的开发，Chrome 团队发布 WebGPU，它允许在 Web 上进行高性能 3D 图形和数据并行计算。WebGPU 默认在 Chrome 113 中可用。

WebGPU 是一种新的 Web API，它公开了现代硬件功能，并允许在 GPU 上进行渲染和计算操作，类似于 Direct3D 12、Metal 和 Vulkan。与 WebGL 系列 API 不同，WebGPU 提供了对更高级 GPU 功能的访问，并为 GPU 上的通用计算提供一流的支持。该 API 的设计考虑了 Web 平台，具有常用的 JavaScript API、与 Promise 的集成、对导入视频的支持以及带有大量错误消息的完善的开发人员体验。

Node.js 更新

2023 年，Node.js 发布了两个主要版本：

• 4 月 18 日，Node.js 20 发布， 更新内容如下：

• 全新的 Node.js 权限模型
• 自定义 ESM loader hooks
• 稳定的测试运行器
• Web Crypto API
• 更新 V8 JavaScript 引擎到 11.3
• 性能提升

• 8 月 28 日，Node.js 20.6 发布，该版本原生支持 .env 文件。
• 10 月 17 日，Node.js 21 发布，更新内容如下：
• 将 V8 引擎升级到 11.8 版本
• 稳定的WebStreams和 fetch 功能
• 用于更改模块默认值的新实验性标志
• 对测试运行器进行更新
• 内置 WebSocket 客户端

除此之外，Node.js 16 已于 2023.9.11 到达生命周期结束（EOL），届时 Node.js 16 已停止维护。

Vite 更新

• 2 月，Vite 4.1 发布，该版本主要是将 Rollup 和 esbuild 的版本进行同步。值得注意的是 React 插件的升级：Plugin-react 插件修复了很多热更新（HMR）方面的问题，并且采用 SWC 的版本增加了对 SWC 插件的支持。
• 3月，Vite 4.2 发布，该版本的主要改进是提升了 source map 的调试体验。Vite 团队与 Chrome Devtools 团队进行合作，修复了一些长期存在的路径显示问题。通过x_google_ignoreList  source map 扩展添加了排除文件的选项来排除堆栈跟踪。
• 4 月，Vite 4.3 发布，该版本专注于改进  devServer 的性能，性能大幅提升：

• 7 月，Vite 4.4 发布，该版本添加了对 Lightning CSS 的实验性支持。这是一个使用 Rust 编写的快速 CSS 编译工具，它可以加快 CSS 的处理速度。这个功能是可选的，需要显式地安装 Lightning CSS，并将其用于处理 Vite 内部的 CSS 转换，如导入内联和 CSS 模块化，还可以用于对 CSS 进行压缩处理。
• 11 月，Vite 5.0 发布，该版本专注于清理 API（删除不推荐使用的功能），并简化了解决长期问题的几个功能，例如切换定义以使用正确的 AST 替换而不是 regex。团队还将继续采取措施来实现未来的 Vite（Node.js 18+ 现在是必需的，CJS Node API 已被弃用）。

Vue.js 推出框架能力官方认证

4 月 25 日，Vue 正式推出框架能力官方认证，即 Vue.js 框架能力证书，该认证由 Vue School 与 Vue.js 团队合作提供支持。

该认证的试题集和代码挑战由 Vue.js 核心团队审核，包括尤雨溪。他们的直接参与有助于确保所测试的能力是实现 Vue.js 框架最佳使用所必需的能力。计划收入的一部分将用于支持 Vue.js 开发。

Qwik 发布 1.0 版本

5 月 2 日，追求极致性能的前端框架 Qwik 发布了 1.0 版本！Qwik 类似于 React，它也使用用 JSX 编写的组件作为模板，主要区别在于其专注于在浏览器中传输最少的 JavaScript。

Qwik 不依靠水合来为服务器上生成的页面带来交互性，而是使用一种称为可恢复性的技术来提供即时交互的 HTML。它通过在 HTML 本身中序列化应用的状态来工作。该项目由 Miško Hevery 领导，他是 AngularJS 的创建者，他的口号是“为 Web 应用增强 HTML”，Qwik 就是“HTML 优先的框架”。

在 2022 年 JavaScript 明星项目的前端框架排行中，Qwik 排在第二位，仅次于 React。

Qwik 提供快速扩展的即用型集成，可以与您喜欢的库和框架轻松集成。只需在命令行上运行npx qwik add，然后从列表中选择所需的集成即可：

• 一次编写，任意部署：支持多个主流云托管服务商，包括Azure、Cloudflare、Google Cloud Run、Netlify、Node.js、Deno、Vercel等，而且这个列表还在不断增长。以与托管提供商无关的方式编写应用，避免厂商锁定。
• UI组件：选择使用QwikUI、Papanasi UI或经过实战检验的UI类库，如Material UI、ChakraUI、Radix或通过Qwik-React使用其他基于React的组件库。
• 图像优化：使用 @unpic/qwik 和 qwik-image 对图像进行优化，以获得最佳用户体验。
• 国际化：使用 $localize 和 qwik-speak 支持多语言交付应用。
• 身份验证：使用业界领先的AuthJS为应用添加多种认证策略。
• CMS：Qwik 与 Builder.io 原生集成，可用于结构化数据和组件级头部内容创建和发布。
• 样式：Qwik 允许延迟加载和组件级样式封装。结合PostCSS、Vanilla Extract或Tailwind等流行解决方案，实现样式需求。
• 测试：使用 Vitest 进行单元测试，使用 Playwright 和 Cypress 进行端到端测试。使用 Storybook 开发和测试组件。
• 企业准备：使用qwik-nx为企业规模的应用和monorepo开发提供特殊的生成器和执行器。

React 推出 Canary 版本

React 团队希望给 React 社区提供一个选项，使其可以在新功能的设计接近完成时就可以选择使用这些功能，而不必等到它们发布为稳定版本，因此引入了一个新的官方支持的 Canary 发布渠道，这个渠道将使用单独的 React 功能与 React 发布计划解耦。

• React 团队为 React 引入官方支持的 Canary 发布渠道。由于它得到官方支持，如果出现任何回归，将像对待稳定版本中的错误一样紧急处理。
• 使用 Canary 可以在它们被发布为稳定的语义化版本之前开始使用单独的新 React 功能。
• 与实验功能不同，React Canaries 仅包含有理由相信可以采用的功能，鼓励框架考虑捆绑固定的 Canary React 版本。
• 将在 React 官方博客上宣布 Canary 版本中的重大更改和新功能。
• React 将在每个稳定版本中继续遵循语义化版本（Semver）。

Vue 发布 3.3 版本

5 月 11 日，Vue 3.3 正式发布，代号为 Rurouni Kenshin。此版本更新主要针对开发者体验进行了改进，特别是在使用 TypeScript 时的 SFC