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 等支持

生產最佳化：內建多項預設最佳化策略，如搖樹最佳化、最小化等等

框架無關：不受限於任何前端框架，確保足夠的靈活性