盘点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

建站动态