2023年的十件前端大事，与我们息息相关~

2024-02-16码农

模拟面试、简历指导、入职指导、项目指导、答疑解惑 可私信找我~已帮助100+名同学完成改造！

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~

CSS 原生支持嵌套语法

以前我们使用 css 需要用到选择器的时候，只能是这么写，这样会导致编写很多重复的样式，可读性以及编写体验都很差：

CSS 的原生嵌套语法在 Chrome 112 版本中正式支持了，支持嵌套的样式规则允许我们将规则嵌套在父选择器中，而不需要重复写父选择器，这样就可以极大简化 CSS 的编写，让代码更具有可读性：

document.domain 只读

在 Chrome 112 中， document.domain 正式被规定为只读，也就是不能修改

那些通过修改 document.domain 来解决跨域问题的场景，需要修改方案了，例如 postMessage

Vue2.x 停止维护

Vue 2 的终止支持日期是 2023 年 12 月 31 日。在这之后 Vue 官方团队会停止对于 Vue2.x 的后续维护

你可以选择升级 Vue3.x 版本，或者选择付费的方式，以获得继续维护 Vue2.x 的服务，官方有推出这一项服务

Vue3.3 的发布

2023 年 5 月 11 号，Vue3.3 正式发布，主要更新的功能有

defineProps 宏支持引入类型，并且支持解构

defineEmits 宏更简便的写法

使用 <script setup> 的组件现在可以通过 generic 属性接受泛型类型参数，也可以使用多个参数，extend 约束、默认类型和引用导入的类型

defineModel 实现自定义组件双向绑定

defineOptions、defineSlots这些非常好用的 API

Typescript 5.x

Typescript 在 2023 年发布了 5.0,5.1,5.2,5.3 版本，主要做了以下功能的改变

全新的装饰器

泛型参数的常量修饰

支持extends合并多个配置文件

枚举增强

moduleResolution 配置新增 bundler支持

自定义解析标志

新增类型导入导出指令 --verbatimModuleSyntax

支持导出 export type *

JSDoc 新增 @satisfies 支持

JSDoc 新增 @overload 支持

运行 tsc --buid 时可以传入的新指令

编辑器中不区分大小写的导入排序

switch 语法补足

优化速度、内存和包大小

Typescript 已死？

很多人都在唱衰 Typescript，甚至很多开源项目已经放弃使用 Typescript，他们认为使用 Typescript 会给开发造成负担，例如 Svelte、Turbo

Vite4.x、5.x 发布

Vite 在 2023 年发布了多个 4.x 以及 5.x 版本

4.x： 修复一些热更新的问题，提升了 source map 的调试体验，提升整体的热更新的性能，加快了 css 转换的速度

5.x： 删除一些之前不推荐使用的 API，Nodejs18+ 成为必须版本，CJS Node API 已被弃用

Nodejs20 发布

主要更新了以下功能：

权限模型

同步import.meta.reslove

构建可执行的独立包

V8引擎升级到11.3

引入 String.prototype.isWellFormed 和 toWellFormed

Array 和 TypedArray 支持返回新建数组对象

支持 Resizable ArrayBuffer 和可增长的 SharedArrayBuffer

正则支持v标志，这种新模式解锁了对扩展字符串类的支持

WebAssembly尾调优化

它还有两项能力：稳定的测试运行、Ada升级到2.0

Nuxt 更新版本

2023年，Nuxt 发布了多个 3.x 版本

在 5 月 16 号，3.5 版本发布，主要支持了 Vue3.3

在 6 月 23 号，3.6 版本发布，主要带来了性能优化

在 8 月 25 号，3.7 版本发布，主要是命令行工具的更新

在 10 月 19 号，3.8 版本发布，主要是带来了内置的开发者工具

Rspack 发布

字节跳动与 Valor 软件开源了 Rspack ，这是一款由 Rust 编写的 Web 捆绑，意在用更快、更直接的方式取代 Webpack。部分早期基准测试表明，Rspack 的冷启动时间有十倍的提升。字节跳动对其的开发主要为缓解 Rspack 在部分场景下生产构建时间长达十分钟至半小时，冷启动时间可超数分钟的问题。为降低迁移成本并维持 Webpack 配置机制所提供的灵活性和生产优化。

Rspack 的功能设计如下：

快速启动：基于 Rust 的飞快构建速度，为你带来极致的开发体验。

模块热替换 (HMR)：内置增量编译机制让 HMR 速度飞快的同时，也完全能胜任大型应用的开发

与 Webpack 的互操作性：与 Webpack 架构和生态系统相兼容，无需重新建立生态系统

内含电池：开箱即用的 TypeScript、JSX、CSS、CSS Modules、Sass 等支持

生产优化：内置多项默认优化策略，如摇树优化、最小化等等

框架无关：不受限于任何前端框架，确保足够的灵活性