2024年前端大事記

一年一度的年更系列又來了。

看看 2024 年前端發生了哪些值得關注的事情吧：

太長不看版（這次不是 AI 生成的哈！）：

語言特性：今年釋出的 EcmaScript 2024 版本平平無奇，沒有什麼比較大的改動，幾項新特性順利進入標準，陣列分組方法是最實用的；TC39 今年召開了 4 次會議，新增了 Stage 2.7 階段，推進了十幾項提案的進展，其中最讓我感興趣的 Signals，這個去年爆火的概念今年進入標準了；TypeScript 一共釋出了 5.4-5.7 四個大版本，新的 NoInfer 型別，支援未初始化變數檢查，都是不錯的更新。
執行時：今年 Node.js 釋出了 22、23 兩個大版本，其中比較重要的一項更新就是支援 require('esm') ，但是因為在頂層 await 上存在相容性問題，使這兩個版本可能會帶開破壞性更新。Deno 今年釋出了 2.0 版本，帶來了不小的增強，Bun 也在今年支援了 Windows 系統。另外今年還新發布了一款比較輕量級的執行時 WinterJS，而去年釋出的 LLRT 也在今年迎來了不少更新，得到更廣泛應用。不過在 JS 年度調查報告裡，Bun、Deno 還都沒能撼動 Node.js 的地位。
前端框架：今年前端框架最大的更新就是 React 19 版本了，React 也釋出了 Compiler，這意味著 React 終於不再只關注執行時，把效能最佳化的重擔全部拋給開發者了，這個版本的出現會一定程度降低 React 的開發門檻；Angular 在今年釋出了 18、19 兩個大版本，開發體驗上有所提升，在今年的 JS 年度調查報告裡開始反轉了；另外 Vue 在今年引入了 alien-signals，噱頭很大，號稱響應式效能提升了 400%；其他還包括 Svelte 釋出了迄今最大更新的 v5 版本。
全棧框架：Next.js 15 主要是配合 React 19 版本，另外還帶來了一些開發體驗上的最佳化；SolidJS 今年也推出了全棧框架 SolidStart，首次引入了伺服器函式的概念；Astro 5.0 也在今年釋出，帶來了 Astro Content Layer 和 Server Islands 這兩個新功能；在 JS 年度調查報告裡，Next.js 在這個領域還是絕對王者。
編譯工具：Vite 在今年勢頭非常強勁，生態體系中重點更新包括 Vite 6.0、Vitest 2.0、VitePress 1.0 以及 Rolldown 1.0，更是在今年的 JS 年度調查報告裡更是獨攬 4 項大獎。另外位元組也推出了基於 Rust 的編譯工具 Rspack 1.0。
瀏覽器：瀏覽器生態方面，今年 Chrome 共釋出了 121-131 10 個大版本，重點包括 CSS 錨點定位、scheduler.yield() API 以及大量的 AI 整合能力，另外 Chrome 的效能面板今年也迎來重大改版，INP 取代 FID 成為新的 Core Web Vitals。
跨端開發：Electron 在今年釋出了 29-33 5 個大版本，基本屬於常規更新；值得關注的是這個領域的新星 Tauri 釋出了 2.0 版本，帶來了移動平臺（iOS、Android）的支援，已經給 Electron 帶來不小的壓力。Meta 在今年開源了面向 Web 和 Native 的跨平臺 React 解決方案；React Native 在今年的 0.76 版本啟用了全新架構，相當於一次全面重寫，官方宣稱其已經具備了生產環境的條件。
AI工具：今年是 AI 工具爆發的一年，AI 程式碼編輯器 Cursor 程式設計能力迎來全面升級，最強競品 Windsurf 相繼釋出；AI 輔助編碼工具 Github Copilot 迎來重大升級，並且宣佈免費額度，位元組也推出了類似的產品 Marscode；在 AI 網站生成領域，V0 支援了 Vue，並且也支援了建立全棧專案，而且類似的專案如 Bolt.new，也相繼出現。雖然這些 AI 工具本身和前端並無繫結關係，但是大家應該也能明顯的感覺到，受這些 AI 編碼工具的影響，前端的開發方式正在發生質的改變。

以下是按時間軸的詳細介紹：

[1-4] Chrome 三方 Cookie 停用已正式開始

根據之前公佈的計劃（自 2024 年 1 月 4 日起），Chrome 已經開始對 1% 的使用者預設限制第三方 Cookie 以方便進行測試（達到剩餘 1% 使用者可能需要數天），這個限制計劃在 2024 年第三季度逐步實施到達 100% 的使用者。

但後續 Chrome 又釋出了一項宣告，表示不再尋求全面停用三方 Cookie ，而是給使用者提供可以選擇的新體驗，但是時至今日，1% 的三方 Cookie 停用仍然存在！

瞭解更多：Chrome 三方 Cookie 停用已正式開始！

[1-23] Chrome 121 釋出

Chrome 121 帶來了如下更新：

Element Capture API：允許捕獲並記錄特定 HTML 元素，尤其適用於 Web 視訊會議應用，可以去除遮擋內容。
Speculation Rules API 更新：支援 document rules 文件規則，使瀏覽器從頁面元素獲取預渲染 URL 列表，提升使用者體驗。
CSS 語法更新：新增 scrollbar-color 和 scrollbar-width 屬性，允許自定義捲軸；font-palette 屬性支援動畫；偽元素 ::spelling-error 和 ::grammar-error 允許自定義拼寫和語法錯誤顯示。
Devtools 更新：提供更友好的 COXP、CSP 等安全 Header 顯示，以及 CSP 違規示例展示。

瞭解更多：Chrome 121 釋出，新特性一覽！

[2-6] TC39 第 100 次會議，新增 Stage 2.7 階段

每個新特性在被正式納入 JavaScript 規範之前，需要透過一個提案流程。這一流程從 0 階段（初步想法）一直到 4 階段（準備釋出）。所有提案流程都是以零為編號開始的，通常包含 0（草案提案）、1（提案透過）、2（特性定義）、3（推薦實施）、和 4（完成併發布）。

新增的 2.7 階段相當於過去的 3 階段，但更強調測試的編寫和驗證。提案進入 2.7 階段時，設計已經完成，規範也已完整，此時需要編寫實際程式碼（包括測試和非 polyfill 實現）來獲取反饋，以便進一步推進。

今年 TC39 的最新提案推進進展我會在後面的 104 次會議介紹。

瞭解更多：https://tc39.es/process-document/

[2-6] jQuery 4.0 Beta 版本釋出

jQuery 4.0.0 Beta 版本經過長時間開發，包含了一些重大更改，包括最佳化效能和修復錯誤。支援已被移除對 IE 10 及更舊版本的支援，雖對 IE 11 仍過渡保留支援。已棄用多版本的 API 被移除，還有一些內部引數及複雜的“魔法”行為被刪除。原始碼遷移到 ES 模組；最佳化 slim 版本體積，刪除了 Deferred 和 Callbacks，推崇使用原生 Promise。jQuery.ajax 現在支援二進位制資料，包括 FormData。

後來 7 月份又釋出了第二個 beta 版本，其中包括新增了 jQuery.fn.off 方法用於更方便地移除事件監聽器，同時對 jQuery.fn.on 方法也進行了最佳化，提高了效率和穩定性。此外，該版本在選擇器效能和 DOM 操作方面都有了顯著的提升。在相容性方面，開發團隊進行了廣泛的測試並修復了一些已知問題。安全性方面，該版本也對 jQuery 程式碼做出了改進，修復了一些潛在的安全漏洞。

瞭解更多：https://blog.jquery.com/2024/07/17/second-beta-of-jquery-4-0-0/

[2-9] HONO 釋出 4.0 版本，支援靜態站點生成

Hono 號稱可以在任何 JavaScript 執行時環境中執行，包括 Cloudflare Workers、Fastly Compute、Deno、Bun、Vercel、Netlify、AWS Lambda、Lambda@Edge 和 Node.js。

Hono v4.0.0 新增了包括靜態網站生成、客戶端元件和基於檔案的路由三個主要功能。新的靜態網站生成工具使得從 Hono 應用生成靜態頁面變得簡單，並支援多種部署平臺。客戶端元件允許使用類似 React 的 JSX 語法進行開發，支援多種 Hook 以及易於使用的檢視過渡 API。基於檔案的路由透過名為 HonoX 的獨立包實現，為構建大規模應用提供靈活支援，同時確保快速的伺服器端渲染。整體上，Hono 繼續保持其輕量級的核心，僅 12KB 的程式碼提供基礎功能。

瞭解更多：Hono – 適用於任何 JavaScript 執行時的 Web 框架！

[2-20] Node.js 正式推出吉祥物

Node.js 自 2009 年誕生以來，一直沒有屬於它的吉祥物，在公開徵集了大家的意見後，終於去推出了它的吉祥物：“火箭龜”。

瞭解更多：Node.js 正式推出吉祥物

[3-4] Claude 3系列模型釋出

Claude 3.5 Sonnet 是目前業界公認的寫程式碼能力最好的模型（GPT4-O3 除外，太貴了），目前主流的 AI 編輯器、程式碼生成網站預設採用的都是此模型。

Claude 3 系列在程式設計領域的優勢在於其卓越的推理和數學能力、長上下文視窗支援、多模態輸入處理、高效的程式碼生成和影像處理能力、快速響應效能、高準確性和成本效益，使其成為處理複雜程式設計任務的強大 AI 助手。

瞭解更多：https://h5ma.cn/Claude3

[3-9] WebAssembly 支援 JavaScript Promise API

WebAssembly 的 JavaScript Promise 整合 (JSPI) API 在 Chrome M123 版本中進入原產地試用階段。JSPI API 旨在允許編譯為 WebAssembly 的順序程式碼訪問非同步的 Web API，該架構使得 WebAssembly 應用可以在 Promise 返回時掛起，並在其被解析後恢復。

瞭解更多：https://v8.dev/blog/jspi-ot

[3-12] WinterJS 1.0 釋出

WinterJS 是一款極快的 WinterCG 相容的 Javascript 執行時，它使用 SpiderMonkey 引擎執行 JavaScript，並使用 Tokio 處理底層的 HTTP 請求和 JS 事件迴圈。WinterJS 執行時還可以被編譯為 WebAssembly，因此它也是第一個可以完全在 Wasmer Edge 上執行的生產級別的執行時。

瞭解更多：號稱迄今最快？又一個新的 JavaScript 執行時釋出了！

[3-12] Meta 開源面向 Web 和 Native 的跨平臺 React 解決方案

Meta 開源了 react-strict-dom 庫，該庫使用 Web API 來渲染元件，從而改進和標準化了用於 Web 和 Native 跨平臺 React 元件的編寫方式，使開發者可以更輕鬆地建立通用 React 元件，同時提高了相容性和開發效率。

瞭解更多：Meta 最新開源！面向 Web 和 Native 的跨平臺 React 解決方案

[3-16] INP 成為 `Web Core Vital`

“互動到下一次繪製（Interaction to Next Paint，簡稱 INP）在 3 月份取代首次輸入延遲成為核心網路關鍵指標，以幫助你更全面地衡量頁面響應能力，而不僅僅侷限於首次使用者輸入。從那時起，在移動裝置上具有 "良好" INP 的網站數量增加了9%，這意味著整個網路上的使用者體驗更快、更愉快。”

瞭解更多：https://web.dev/articles/inp

[3-21] VitePress 1.0 釋出

VitePress 是一種由 Vue 團隊推出的現代化靜態站點生成器。VitePress 旨在構建快速、以內容為中心的網站，並能夠將 Markdown 格式的內容轉換為靜態 HTML 頁面，支援多平臺部署。

VitePress 基於 Vite 和 Vue，作為 VuePress 的繼任者，提供了多樣化的使用場景，包括技術文件編寫、部落格、作品集與營銷網站等。它支援自定義主題和靈活的 API，能夠簡化開發者體驗並支援即時內容更新。此外，VitePress 結合靜態和單頁應用程式 (SPA) 模型，實現了初始快速載入和導航時的無縫互動體驗，在提升效能的同時，優化了使用者體驗和 SEO。

瞭解更多：https://blog.vuejs.org/posts/vitepress-1.0

[4-1] Bun 支援了 `Windows` 系統

Bun 1.1 正式支援了 Windows 系統，也意味著其覆蓋了所有主流作業系統。

效能方面也大幅提升，如在 Windows 上安裝依賴速度更快，檔案系統操作等方面也有最佳化；改進了 Node.js 相容性，修復上千個 bug 並新增大量 API 支援；新增瞭如 .bunx 檔案型別等新特性；WebSocket 客戶端趨於穩定；內建的測試框架得到更新，增加了更多期望方法以及模組模擬功能等。

瞭解更多：https://bun.sh/blog/bun-v1.1

[4-3] TypeScript 5.4 釋出

TypeScript 5.4 版本帶來一些新特性和一些破壞性變更。新特性包括最佳化閉包中的型別收窄、引入了 NoInfer 工具型別以改善型別推斷過程、為 Object.groupBy 和 Map.groupBy 新增型別宣告。破壞性變更包括更準確的條件型別約束和更靈敏的型別交集處理。文章詳細解釋了這些特性的實現以及可能帶來的影響，使開發者可以更好地理解和應用這些更新。

瞭解更多：TypeScript 5.4：帶來新的型別和一些 Break Change

[4-8] TC39 推出 Signals 的標準化提案

在前端開發領域，狀態管理總是一個繞不開的話題。隨著 Web 應用程式越來越複雜，對於高效且可靠的狀態管理解決方案的需求也水漲船高。2022 年，JavaScript 世界中出現了一個新概念：Signals ，這個概念一度被大家炒作為前端狀態管理的未來。

Rob Eisenberg 以及 Daniel Ehrenberg 正式公開發布了 Signals 的 TC39 標準化草案，目前處於 Stage0 階段，並且也推出了符合規範的 polyfill 。

瞭解更多：Signals 的標準化提案，來了！

[4-22] Node.js 22 釋出

Node.js 22 版本主要更新包括：增強的 require() 函式以支援 ECMAScript 模組（ESM）的直接匯入，內建 WebSocket 客戶端的引入，以及 V8 JavaScript 引擎的更新。

瞭解更多：https://nodejs.org/en/blog/announcements/v22-release-announce

[4-27] Iterator Helper 提案正式獲得瀏覽器支援

Iterator（迭代器）和陣列的概念類似，在 JavaScript 中都是用於儲存和管理資料集合的機制。但實際開發中，我們使用陣列的場景要遠遠多於 Iterator ，主要原因還是因為 Iterator 太難用了，它不像陣列一樣給我們提供了很多便捷的高階函式（如 map、filter 等）。

Iterator helpers 提案正式出來解決這個問題的，它已經有幾年時間了，目前處於 Stage3 階段。

Iterator helpers 提供了一整套方法，使得迭代器的操作變得像陣列一樣簡單。它允許你可以以鏈式呼叫的方式來組合方法，比如可以先用 .map() 處理資料，緊接著用 .filter() 篩選出需要的部分，最後用 .toArray() 將其轉換成陣列。

在 V8 12.2/Chrome 122 中，Iterator helpers 正式獲得了支援。

瞭解更多：ECMAScript 的 Iterator Helper 提案正式獲得瀏覽器支援！

[5-10] Chrome 125 支援 CSS 錨點定位

Chrome 125 新增了一個比較重要的特性：CSS 錨點定位 API。這個新功能允許開發者透過原生方式定位相對於其他元素的元素，從而簡化複雜佈局的實現，例如選單、工具提示和對話方塊等。具體實現方式包括隱式錨點和顯式錨點，透過 anchor-name 和 position-anchor 屬性進行元素定位。

瞭解更多：Chrome 125：CSS 錨點定位來了！

[5-14] Google I/O 2024：下一代 Web 應用的新模型

Google I/O 2024 的值得關注的重點內容就是 Web AI 的新模型、工具和 API，可以直接在使用者裝置的瀏覽器中執行 AI 任務，透過 WebAssembly 和 WebGPU 等現代 Web 技術實現即時、隱私友好且低延遲的 AI 服務。

同時，Google 推出了 Visual Blocks，這是一種基於節點圖編輯器的機器學習原型工具，簡化了 AI 專案的原型設計。此外，還介紹瞭如何在 Chrome 中使用 JavaScript 大規模實現 Web AI 和進行模型測試。

瞭解更多：Web AI：下一代 Web 應用的新模型、工具、API

[5-22] SolidStart 1.0 釋出

SolidStart 是一個新的 JavaScript 框架，用於構建和部署 SolidJS 應用。

SolidStart 強調伺服器端渲染和最佳化，採用靈活的路由機制，並首次引入“伺服器函式”功能，可以讓函式僅在伺服器上執行。其基礎輕量級設計，支援多種伺服器端和客戶端功能，旨在提供開發者一個靈活、高效的框架，以更好地抓住日益增長的系統複雜性。

瞭解更多：https://www.solidjs.com/blog/solid-start-the-shape-frameworks-to-come

[5-22] Angular v18 釋出

Angular v18 版本正式釋出，帶來了一系列新功能和改進。

此次更新的亮點包括實驗性的無區分檢測（zoneless change detection），該功能旨在提高效能和開發者體驗；Angular.dev 成為新的官方開發者文件網站；Material 3、可延遲檢視和內建控制流現已穩定；以及伺服器端渲染方面的增強。這個版本還改進了除錯體驗，增加了事件重播功能，並引入了用以漸進式提高應用效能的部分水化技術。透過這些更新，Angular 繼續推進其架構的演進，提高開發效率和應用效能。

瞭解更多：https://blog.angular.dev/angular-v18-is-now-available-e79d5ac0affe

[6-10] WWDC24 – iOS18 下的 WebKit 更新

在 WWDC 2024 上，iOS 18 中 WebKit 的主要更新包括支援 View Transitions API、樣式查詢、背景濾鏡內容可見性最佳化、新的 Web API 功能（如空間照片和 WebXR 支援）、加強的安全策略和 JavaScript 正則表示式的改進。這些更新提升了動畫效果、效能最佳化、安全性和功能豐富性，實現了更好使用者體驗的瀏覽器表現。

瞭解更多：WWDC24 – iOS18 下的 WebKit 有哪些更新？

[6-11] Chrome 126：新元素 `<permission>`、多頁 `View Transitions API`

<permission> 元素是 HTML 中的新元素，用於改進 Web 許可權的請求和管理。主要特點包括：

宣告式請求許可權：透過 <permission type="camera"> 等宣告方式請求特定許可權，如攝像頭、麥克風等。
使用者互動：使用者可以直接透過與該元素互動來允許或拒絕許可權請求，提升使用者體驗和安全性。
動態文字：元素會根據許可權狀態自動更新其顯示內容，提供即時反饋。

這個版本另一個值得關注的是 View Transitions API 的多頁面支援，也就是跨文件檢視過渡（cross-document view transitions）是當檢視過渡發生在兩個不同文件之間時使用的技術，適用於多頁面應用（MPA）。與相同文件檢視過渡相似，跨文件檢視過渡利用了元素快照和 CSS 動畫，但其觸發機制不同。跨文件過渡不需要呼叫 API，只需使用者在同一來源的兩個頁面間導航即可觸發。

瞭解更多：一個新的 HTML 元素：<permission>！

[6-15] React Compiler 開源

React Compiler 於 2024 年 6 月在 React Conf 2024 上開源，並在 10 月 22 日釋出了 beta 版本。

React Compiler 是一款針對 React 的最佳化編譯器，目前已在 Instagram 的網頁門戶中投入生產使用。它旨在透過自動生成類似 memo、useMemo 和 useCallback 的呼叫等先進編譯技術，強化 React 的核心程式設計模型，減少不必要的重新渲染，從 “自動記憶化編譯器” 演進為 “自動響應性編譯器”，確保 React 應用僅在狀態值發生實質性變化時才觸發重新渲染，進而提高效能，簡化開發流程，降低開發者的工作量和程式碼複雜度。

瞭解更多：React Compiler 介紹

[6-26] ECMAScript 2024 釋出

ECMAScript 2024 語言規範新增六項提案：

文章主要介紹了 ECMAScript 2024 語言規範中的幾個新提案。摘要如下：

格式良好的 Unicode 字串提案：引入方法 String.prototype.isWellFormed() 和 String.prototype.toWellFormed()，檢查和轉換字串中存在的孤立代理對。
非同步 Atomics 等待提案：提供非同步的 Atomics.waitAsync() 方法，支援在主執行緒上操作共享記憶體而不會阻塞。
RegExp v 標誌提案：增強正則表示式的功能，支援 Unicode 字串屬性的檢查，並提供減法、交集和並集匹配。
ArrayBuffer 轉移提案：增加 ArrayBuffer.prototype.transfer 和 transferToFixedLength 方法，支援 ArrayBuffer 大小調整和資料遷移。
陣列分組提案：引入靜態方法 Object.groupBy 和 Map.groupBy，實現類似 Lodash 和 Ramda 的陣列分組功能。
Promise.withResolvers 提案：新增 Promise.withResolvers 方法，方便建立和管理延遲的 Promise 例項。

瞭解更多：ECMAScript 2024 新特性解讀！

[7-15] Chrome 首次推出 LLM API

Chrome 宣佈提供內建的 Gemini Nano 支援，這意味著我們的網站或網路應用現在可以直接執行 AI 功能，而不需要自己去部署或管理 AI 模型。

瞭解更多：Chrome 居然提供了可以直接呼叫 LLM 的 API！

[8-22] Node.js 對 TypeScript 提供了原生支援！

Node.js 22.7.0 版本中，引入了一個新的實驗性標誌，--experimental-transform-types。

透過這個標誌，可以啟用將僅用於 TypeScript 的語法轉換為 JavaScript 程式碼的功能。這個特性使得 Node.js 能夠原生支援 TypeScript 語法，例如列舉（Enum）和名稱空間（namespace）等，而不需要引入額外的編譯工具。

[8-28] Rspack 1.0 釋出

Rspack 是基於 Rust 編寫的下一代 JavaScript 打包工具，相容 webpack 的 API 和生態，並提供 10 倍於 webpack 的構建效能。

瞭解更多：Rspack 1.0 正式釋出了！

[9-1] Vue 3.5 釋出

Vue.js 3.5 版本代號為 "Tengen Toppa Gurren Lagann"，此更新沒有破壞性更改，主要包含內部最佳化和新功能。關鍵亮點包括響應系統的重大重構，提升效能，減小記憶體使用，以及解決了服務端渲染(SSR)中的一些問題。新特性方面，有反響式屬性解構，伺服器端渲染改進(如延時啟用)，自定義元素的增強，新的 API useId()和模板引用(useTemplateRef())等功能。

瞭解更多：https://blog.vuejs.org/posts/vue-3-5

[9-13] CSS Values and Units Module Level 5

CSS 工作組於 2024 年 9 月 13 日釋出了 CSS 值和單位模組第 5 級（CSS Values and Units Module Level 5）的首個公眾工作草案。這個模組描述了 CSS 屬性接受的通用值和單位及其語法，並且引入了一些有趣的新特性。

這些功能中的很多功能都有一個共同點：它們簡化了 CSS 程式碼。以前需要多條規則或複雜解決方案才能實現的功能，現在只需一行或兩行 CSS 即可實現。

瞭解更多：CSS 即將迎來一波新的值和函式！

[9-14] HTTP QUERY 方法草案發布

在傳統的 HTTP 協議中，GET 和 POST 是最常用於請求資料的兩種方法。然而，它們各自有著一定的侷限性。特別是當請求資料量較大時，透過 GET 方法將引數嵌入 URL 中顯得不夠靈活。另一方面，儘管 POST 方法允許在請求體中傳遞大量資料，卻無法保證操作的冪等性和安全性。

為了彌補這些不足，HTTP 工作組提出了一種新的方法 — QUERY，該方法既能承載大量請求資料，又能保證請求的冪等性和安全性。

瞭解更多：HTTP 將增加一個新的方法型別！

[9-17] Chrome 129 ：推出原生的 “時間切片” 能力

Chrome 129 釋出，其中一項最值得關注的就是 scheduler.yield() API：

scheduler.yield() API：這一API允許開發者將長時間執行的JavaScript任務分塊執行，以防止阻塞主執行緒，從而提高瀏覽器響應使用者輸入的能力。這有助於避免網頁卡頓及最佳化關鍵效能指標，如INP。
Intl.DurationFormat 支援：該功能允許以多種語言格式化時間持續時間，例如法語。
CSS interpolate-size 屬性和 calc-size() 函式：這些新特性簡化了基於尺寸關鍵詞的CSS動畫，以便實現更流暢的過渡效果。
CSS 錨點定位的變更：經過CSS工作組內部討論，調整了相關命名以提升可讀性和記憶性，其中 inset-area 改名為 position-area，position-try-options 改名為 position-try-fallbacks。

瞭解更多：Chrome 129：正式推出原生的 “時間切片” 能力！

[10-1] 尤雨溪創辦新公司，宣佈打造下一代 JavaScript 工具鏈！

尤雨溪創辦了新公司 VoidZero Inc.，併成功獲得了 460 萬美元的融資，目標是打造下一代 JavaScript 工具鏈。這家公司旨在構建高效能並具備統一開發體驗的開源工具鏈，以解決當前 JavaScript 生態系統中的碎片化問題。

VoidZero 引入了一些創新元件，如 Oxc-parser、Rolldown 等，提升了整體的解析和打包速度。公司計劃在未來幾個月穩定和推廣這些工具，與生態系統的其他參與者協作，確保平穩過渡並保持開源戰備狀態。

瞭解更多：融資三千萬！尤雨溪創辦新公司，宣佈打造下一代 JavaScript 工具鏈！

[10-2] PC 跨端框架 Tauri 2.0 釋出

Tauri 是一個用於構建輕量級、快速二進位制檔案的框架，支援所有主流的桌面平臺（macOS、Linux、Windows）和移動平臺（iOS、Android）。開發者可以將任意前端框架（如 HTML、JavaScript 和 CSS）與 Rust、Swift 和 Kotlin 等語言編寫的後臺邏輯結合起來，建立使用者體驗出色的應用程式。

這次更新的一大亮點是對 iOS 和 Android 的原生支援，擴大了其應用場景。開發者可以無縫將現有的桌面應用邏輯重用於移動平臺。Tauri 提供了全新的 create-tauri-app 專案，簡化開發流程，並引入了熱模組替換功能、全新的許可權系統和重構的外掛系統。此外，Tauri 2.0 提供了更高效的內部通訊和多渠道分發支援。與 Electron 相比，Tauri 2.0 提供了更輕量級和現代的跨平臺開發體驗。

瞭解更多：Tauri 2.0 釋出：這次能擊敗 Electron 嗎？

[10-5] Bolt․new 釋出

Bolt.new 是一個基於瀏覽器的全棧開發平臺，利用AI和 WebContainer 技術，可在瀏覽器中完成從程式碼編寫到應用部署的全棧開發流程，能建立和執行完整專案，包括與第三方 API 互動等，AI 還可控制開發環境及自動修復錯誤；

相比 V0 ，Bolt.new 給程式設計師的衝擊會更大，因為它是真正意義上的可以基於 AI 生成全棧專案了，而 V0 當時大多數情況還是在以生成原型、DEMO 在使用。

瞭解更多：https://bolt.new/

[10-9] Deno 2.0 釋出

Deno 2.0 版本經發布：

全域性變數變化：移除了 window 全域性變數，建議使用 globalThis 或 self。同時，引入了 process 全域性變數來增加與 Node.js 的相容性。
依賴管理改進：deno add 和 deno remove 子命令被增強，並引入了新的 lock 檔案格式。
許可權系統更新：引入了新的 Deno.errors.NotCapable 異常型別，以便更好地區分 Deno 許可權和作業系統錯誤。
API 穩定化：許多不穩定的 API 已經在 Deno 2 中穩定，不再需要特定的標誌啟用。
相容性增強：改進了對 CommonJS 模組的支援，並允許透過 require 匯入 ES 模組，進一步提升了與 Node.js 和 npm 的相容性。
TypeScript 支援：升級到 TypeScript 5.6，增強了對 Node.js API 的型別檢查支援。

瞭解更多：Deno 推出 2.0 版本，研發體驗迎來大幅增強！

[10-12] TC39 104 次會議，推進諸多新提案進展

ECMA 國際技術委員會 39（TC39）在東京召開了第 104 次大會，討論了多項 ECMAScript（JavaScript）提案的進展情況，批准了其中多項提案進入下一個階段。

「Stage 4」迭代器助手（Iterator Helpers）
「Stage 4」匯入屬性與 JSON 模組（Import Attributes & JSON Modules）
「Stage 4」正則表示式修飾符（Regular Expression Modifiers）
「Stage 4」Promise.try
「Stage 3」精確求和（Math.sumPrecise）
「Stage 3」Atomics.pause
「Stage 2.7」Error.isError
「Stage 2.7」迭代器序列化（Iterator Sequencing）
「Stage 2」結構體與共享結構體（Structs & Shared Structs）
「Stage 2」Extractors
「Stage 1」Array.zip
「Stage 1」不可變的 ArrayBuffer（Immutable ArrayBuffers）

瞭解更多：12 項 ECMAScript 提案的最新進展！

[10-15] Express v5 版本釋出

Express.js 5.0 版本帶來了一些值得注意的新特性和改進。其中最顯著的是完全重構了路由系統，提供了更靈活和直觀的 API。開發者現可以使用專門的 app.route() 方法來定義路由，從而讓程式碼更加清晰易讀。此外，路由處理函式現在也支援非同步操作，可以更好地處理複雜的業務邏輯。

在錯誤處理方面，5.0 版本引入了中介軟體錯誤處理能力，可以更方便地集中處理各種異常情況。開發者只需定義一個專門的錯誤處理中介軟體即可。效能最佳化也是此版本的一大亮點，對框架的核心元件進行了重構，大幅提升了系統的吞吐量和響應速度。

瞭解更多：https://expressjs.com/2024/10/15/v5-release.html

[10-16] Node.js 23 釋出

Node.js 23 正式釋出，推出了多項新的改進和功能：預設支援 require(esm) 引入原生 ES 模組、放棄對 Windows 32 位系統的支援、穩定版 node --run 命令、更強大的內建測試執行器，以及實驗性 TypeScript 支援、Web 儲存 API 和 SQLite 整合，同時改進了效能，提升程式碼啟動時間和檔案系統性能。

瞭解更多：Node.js 23 正式釋出！、注意，使用這個 API 可能導致你的 Node.js 出現相容性問題！

[10-21] Next.js 15 釋出

Next.js 15 帶來如下重要更新：

Turbopack Dev: Turbopack Dev作為預設開發伺服器，為開發者提供更快的開發體驗。
非同步請求 API: 新增的fetch API讓非同步請求變得更加容易，並支援在伺服器元件中進行資料獲取。
快取語義: 新增的cache API，讓開發人員能夠更好地控制快取行為，提高頁面載入速度。
React 19支援: Next.js 15完全支援最新的React 19版本，並提供了多種改進，簡化React應用的開發。
TypeScript支援: 提供了對next.config的TypeScript支援，讓配置更加安全和可靠。
效能最佳化: 在構建速度和執行效率上進行了最佳化，從而提升整體效能。

瞭解更多：https://nextjs.org/blog/next-15

[10-22] Svelte 5 釋出

經過近 18 個月的開發，Svelte 5 是該專案歷史上最重要的釋出之一，是從頭開始重寫的版本，能夠使應用程式更快、更小、更可靠。

新版本引入了符文（runes）的概念，提供了一種顯式機制來宣告響應狀態，並對元件構成、事件處理程式等進行了改進，同時具有原生 TypeScript 支援，許多 bug 修復，以及全面的效能和擴充套件性改進。對於正在使用 Svelte 3 的使用者，建議首先遷移到 Svelte 4，然後逐步將元件遷移到使用新語法和功能。Svelte 5 的釋出奠定了許多改進的基礎，展望未來還有更多想法要在 Svelte 中實現。

瞭解更多：https://svelte.dev/blog/svelte-5-is-alive

[10-23] React Native 推出全新架構

React Native 框架進入了一個全新的階段。新架構的核心改變是引入了一個新的 JavaScript 引擎 – Hermes。Hermes 可以大幅提升應用的啟動速度和整體效能表現。同時，新架構還重新設計了通訊層，使得 Native 元件和 JavaScript 執行時之間的互動更加高效和穩定。

瞭解更多：https://reactnative.dev/blog/2024/10/23/the-new-architecture-is-here

[10-29] 微軟推出全新的生成式 AI 指令碼：GenAIScript

微軟推出了全新的生成式 AI 指令碼語言 GenAIScript，它將生成式人工智慧與指令碼編寫結合。GenAIScript 支援 JavaScript 和 TypeScript，整合大型語言模型（LLM），簡化了自然語言處理任務，並且提升了開發者建立自動化任務的靈活性。

這一全新語言使開發者能夠直接呼叫AI進行復雜的內容生成和資料處理，提供了高效的自動化能力。安裝與使用方面，GenAIScript 需要 Node.js 和 Visual Studio Code 擴充套件，指令碼檔案以 .genai.mjs 或 .genai.mts 命名。

瞭解更多：微軟推出全新的生成式 AI 指令碼：GenAIScript！

[11-3] State Of CSS 2024 釋出

2024年的《State Of CSS》報告顯示，CSS 的發展正處於經典和現代之間的轉折點。現代 CSS 引入的新特性如 Subgrid 和 :has() 顯著減少了對外部工具和複雜 JavaScript 方案的依賴，在 CSS 框架中，Tailwind CSS 繼續領先。

儘管 Sass/SCSS 依舊被廣泛使用，但 CSS 本身逐漸吸收了許多關鍵功能。瀏覽器不相容仍是一個問題，但新功能如容器查詢得到了一定的支援，未來將進一步推動 CSS 的高效和靈活應用。

瞭解更多：State Of CSS 2024 出爐！開發者最喜歡的 CSS 新功能是？

[11-5] NPM 作者推出全新的 JavaScript 包管理器！

在愛爾蘭舉行的 NodeConf EU 上，NPM 作者正式宣佈，推出全新的 JavaScript 包管理器 vlt 及 Serverless 登錄檔 vsr！

此次首發版本帶來了令人印象深刻的 Node.js 依賴安裝和管理能力。在大多數情況下，vlt 可以直接替換你現有的包管理器。乍一看，vlt 客戶端可能與普通的包管理器類似，但我們興奮地推出了一些創新功能，如全新的依賴查詢選擇器語法、各種匯出格式（包括 Mermaid）以及直觀的圖形介面體驗，幫助開發者更輕鬆地理解專案的依賴關係圖。

瞭解更多：NPM 作者推出全新的 JavaScript 包管理器！

[11-10] Chrome 推出大量 AI 能力

Chrome 在 AI 領域做出了重大的更新，推出了多項內建 AI API，包括 Translation API、Summarizer API 和 Prompt API。

這些 API 可以在瀏覽器本地執行，減少了對伺服器的依賴，實現更快速和安全的資料處理。藉助這些功能，開發者可以更有效地整合 AI 技術來增強使用者體驗，同時提高AI模型的執行效率和安全性。

瞭解更多：Chrome 全面擁抱 AI ！

[11-13] Vue 宣佈引入 alien-signals，效能大幅提升

Vue.js 3.5 版本透過引入 alien-signals 庫，大幅提高了響應式系統性能，減少了記憶體使用，並優化了程式碼抽象，使其在效能測試中表現優秀。新的實現帶來了超過 30 倍的效能提升，並在 JS Reactivity Benchmark 中領先其他框架。

瞭解更多：Vue.js 高調宣佈：我們將成為最快的響應式框架！

[11-16] AI 編輯器 Windsurf 釋出

Windsurf 編輯器可謂是 Cursor 的最強競品，也是作者目前使用比較多的一款編輯器。

Windsurf 由 Codeium 推出，其以其創新的 AI Flows 協作模式、Cascade 上下文感知功能和多檔案編輯能力，為開發者提供了一個高效、智慧的程式設計環境，旨在透過先進的 AI 技術提升程式設計效率和協作體驗。

瞭解更多：只花了 2 小時，我快速打造並上線了一款 AI 小程式！

[11-18] State of Frontend 2024 釋出

《State of Frontend 2024》報告顯示 React、Vue.js 等框架仍主導市場，而 Svelte 等新技術受到關注。微前端使用率下降，反映行業對架構方法的變化。TypeScript 普及率增加，漸成 Web 標準。PWA 在移動應用中的應用增長，多數開發者已將 AI 整合到工作流程中。Vite 因高效效能得到了高度認可，前端開發領域呈現多樣性和技術進步的趨勢。

瞭解更多：2024 年，前端的開發方式正在發生著顯著變化！

[11-19] Angular 19 釋出

Angular 19 重點更新包括：在效能最佳化方面，引入了增量水合的開發者預覽版，可減少初始載入的 JavaScript 體積，還預設啟用事件重放功能，並提供了新的 <ServerRoute> 介面來配置路由級別的渲染模式，同時繼續實驗無 zone 支援。

在開發者體驗上，預設支援樣式的熱模組替換，實驗性支援模板 HMR，更新了獨立元件的預設設定及相關檢查，改進了測試工具鏈，還透過整合架構和語言服務簡化了程式碼更新過程；在響應式系統中，穩定了核心反應性 API，新增了 linkedSignal 和 resource 等API；另外，在安全性上提供了自動生成基於雜湊的內容安全策略功能，並且 Angular Material 和 CDK 也有所增強，如簡化自定義主題建立、新增二維拖放和標籤重新排序功能以及新的時間選擇器元件等.

瞭解更多：https://angular.love/angular-19-whats-new/

[11-22] TypeScript 5.7 釋出

TypeScript 5.7 版本釋出，帶來多項新特性和最佳化，包括未初始化變數更嚴格的檢查、相對路徑重寫、支援更高版本的 ECMAScript、改進的模組和配置檔案處理、新的 V8 編譯快取支援以及泛型型別化陣列更新。

瞭解更多：TypeScript 5.7 釋出

[11-25] Deno 要求 Oracle 放棄 JavaScript 商標

Deno 正式向美國專利商標局（USPTO）提交了一份請願書，要求取消 Oracle 對 “JavaScript” 的商標權。

如果此次請願成功，將消除限制社群使用 JavaScript 名稱的障礙。各類會議可以重新使用類似 “JavaScript 大會” 這樣的名稱，而非妥協為 “JSConf”。語言規範也可以更名為 “JavaScript 規範”，拋棄冗長的 “ECMAScript” 名稱。此外，像 “JavaScript 開發者的 Rust 社群” 這樣的組織也不再需要因名稱使用問題擔心法律威脅。

瞭解更多：Oracle 應該放棄 JavaScript 商標！

[11-26] Vite 6.0 釋出

自從一年前釋出 Vite 5 以來，Vite 的採用率不斷增長，每週的 npm 下載量從 750 萬增長到 1700 萬。Vitest 在使用者中受到偏愛，開始形成自己的生態系統。多個新框架加入了 Vite 生態系統，如 TanStack Start、One、Ember 等。Vite 還被諸多大公司使用，如 OpenAI、Google、Apple、Microsoft、NASA 等。

Vite 6.0 是自 Vite 2 以來的最重要的主要釋出，為生態系統提供了新的 API，並提供更加精緻的基礎來構建。新版本引入了實驗性的 Environment API，允許框架作者提供更接近生產環境的開發體驗，併為生態系統共享新的構建模組。Vite 6.0 支援 Node.js 18、20 和 22+，不再支援 Node.js 21。

瞭解更多：https://vite.dev/blog/announcing-vite6.html

[12-1] Web Almanac 2024 釋出

Web Almanac 是一份關於全球網路狀況的年度報告，彙集了數以百計的網路開發人員和分析員的協作努力。Web Almanac 提供了關於網站效能、技術使用、SEO、設計趨勢和其他多個領域的全面資料洞察與分析。透過這些深入的分析和統計，開發人員和決策者可以瞭解當前的網路趨勢以及未來可能的發展方向。這份報告通常涵蓋多個章節，每個章節聚焦於特定的主題或技術領域，透過詳實的資料來揭示行業的現狀和未來趨勢。

我整理了今年的效能、安全兩個部分的報告。

網路安全方面，強調了TLS、HSTS、CSP等技術的使用及存在的配置問題；網站效能方面，首次內容繪製（FCP）和最大內容繪製（LCP）有所改善，但首位元組時間（TTFB）變化不大。此外，新技術如現代影像格式的採用提高了網站的載入速度和視覺穩定性，而互動效能指標 INP 的提升揭示了使用者體驗的持續改善。

瞭解更多：2024 年前端效能報告、2024 年前端安全報告

[12-3] Astro 5.0 釋出

Astro 5.0 的釋出，其中包括了 Astro Content Layer 和 Server Islands 這兩個新功能。Astro Content Layer 提供了一種靈活且可插拔的方式來管理內容，統一了定義、載入和訪問內容的 API，無論內容來自何處。而 Server Islands 則將高效能的靜態 HTML 與動態生成元件結合在同一頁中，為使用者提供更個性化、更動態化的內容體驗。此外，還介紹了簡化的預渲染、型別安全的環境變數、Vite 6 等新功能和實驗性功能。這些更新將帶來更高效、更靈活和更可靠的開發體驗，為使用者構建內容驅動的網站提供了更好的工具和支援。

瞭解更多：https://astro.build/blog/astro-5/

[12-5] React 19 正式釋出

自從 4 月份 React 釋出了 19 RC 版本後，經過 8 個月的漫長等待，React 終於釋出了 19 的正式版本。

React 19 引入了許多新功能和改進，包括支援非同步函式的 Actions、用於樂觀更新的 useOptimistic 鉤子、新的 useActionState 鉤子、改進的表單處理、以及新的 use API。新增的 React DOM 靜態 API 和伺服器元件功能使得靜態站點生成和伺服器端渲染更加高效。此外，React 19 還改進了 ref 的處理、支援文件元資料和樣式表的渲染、以及對非同步指令碼和資源預載入的支援。錯誤報告和第三方指令碼相容性也得到了增強。

瞭解更多：React 19 正式釋出

[12-20] V0 支援生成全棧專案

V0 是 Vercel 推出的 AI 驅動生成式 UI系統，應該是感受到了 Bolt.new 的巨大壓力，今日迎來一波重大更新。

此次重大更新支援一鍵生成並部署全棧專案，可一次性建立多個檔案執行和預覽完整 Next.js 應用，涵蓋複雜架構元素，能訪問 Vercel 環境變數以連線外部服務，可直接部署到 Vercel 並設自定義子域名，付費使用者可從 Figma 匯入設計稿，還有UI快速編輯、控制檯輸出檢視、檔案管理功能改進等，免費版使用者專案建立上限提升，以電子商務網站構建為例展示其應用，更新後 V0 從原型圖生成工具轉變為具備全棧專案開發能力。

瞭解更多：V0 迎來重大更新，支援一鍵生成 & 部署全棧專案

[12-25] Rolldown v1.0.0-beta.1 版本釋出

Rolldown 於今年 3 月開源，經過幾個月的迭代，於 12-25 釋出了第一個 1.X 版本。

Rolldown 是由尤雨溪主導的一款基於 Rust 開發的 JavaScript 打包工具，與 Rollup 相容且類似 esbuild 的功能架構，具有快速效能和便利的開發體驗，其核心優勢包括透過 tree-shaking 等智慧最佳化方式減少最終打包檔案體積、提升打包速度，以及提供直觀的 API 以方便整合和遷移，旨在成為 Vite 未來的主要打包工具。

瞭解更多：https://github.com/rolldown/rolldown/releases