前端前線 2026 年 4 月 26 日

2026-04-26 — Fresh 2.3 零 JS 預設、Gleam Source Maps、JetStream 3 跨瀏覽器基準

Fresh 2.3:零 JavaScript 預設、View…

Fresh 2.3:零 JavaScript 預設、View Transitions 與 Temporal API 支援

Deno Blog · 2026-04-24

Deno 的 Fresh 框架在 2.3 版本中引入三項架構層級的改動,影響頁面傳輸體積、動畫 API 的整合方式,以及 Temporal 物件的序列化機制。

零 JavaScript 預設輸出

先前所有 Fresh 頁面都會攜帶約 5–9 KB(gzip 後)的引導腳本,即使頁面中完全沒有 island 或 partial。2.3 版起,編譯器在建構期間靜態分析頁面是否真正依賴客戶端互動;若無,則完全省略 JavaScript 注入,輸出為 0 KB。這項改動不需要任何設定變更,屬框架行為調整。

View Transitions API 整合

開發者在 <body> 標籤加上 f-view-transition 屬性後,partial 導航會自動套入 document.startViewTransition()。CSS 偽元素 ::view-transition-old(root)::view-transition-new(root) 可用來撰寫自訂過場動畫。不支援 View Transitions API 的瀏覽器會靜默降級為標準更新,不需條件判斷。

Temporal API 的 Island Props 傳遞

伺服器端的 Temporal 物件現在可以直接作為 island props 傳遞至客戶端,支援全部八種型別:InstantZonedDateTimePlainDatePlainTimePlainDateTimePlainYearMonthPlainMonthDayDuration。框架在序列化層處理這些型別,開發者不需手動轉成 ISO 字串再於客戶端解析。

WebSocket 支援

新增原生 WebSocket 路由支援,可用 app.ws() 或在檔案路由中呼叫 ctx.upgrade()。框架提供 managed 模式(預定義的 open/message/close 處理器)與 bare 模式(手動管理 socket 生命週期),後者適合需要跨連線廣播的場景(如聊天室)。

安全性中介軟體

CSP nonce 支援讓框架每次請求自動生成唯一 nonce 並注入 inline script/style,對應 Content Security Policy 標頭;ipFilter() 中介軟體支援 CIDR 格式的允許 / 拒絕清單。

基礎設施改進

Vite 整合中移除了兩個 Babel pass,將 CJS 轉換與 process.env 替換委由 Vite 直接處理,解決了 Radix UI 等套件造成的 Preact 重複實例問題。中介軟體鏈由每次請求動態組合改為啟動時預編譯。

原始來源:Fresh 2.3 Release Notes — Deno Blog


Gleam 1.16.0:JavaScript 編譯目標加入 Source Maps 支援

Gleam Blog · 2026-04-24

Gleam 1.16.0 為 JavaScript 編譯目標新增 source map 產生能力,並提升編譯器在遇到錯誤時的容錯行為。

Source Maps 實作機制

Gleam 編譯至 JavaScript 時,現在可同步輸出 .map 檔案,記錄編譯後 JS 與原始 Gleam 原始碼之間的位置對應關係。瀏覽器開發者工具(含 Safari)讀取 source map 後,例外堆疊追蹤和中斷點均可直接指向 .gleam 原始碼位置。啟用方式為在 gleam.toml 中設定:

[javascript]
source_maps = true

若使用 Lustre 的 dev-tools 或直接提供 build 目錄,無需額外設定;若自行部署,需確保 .map 檔案與對應的 JS 檔案放在同一路徑可被存取。此功能由 Ameen Radwan 貢獻。

套件層級容錯編譯

先前版本在子模組出現錯誤時會中止整個編譯流程。1.16.0 起,編譯器識別出失敗的模組子樹後,會剪除該失敗路徑並繼續編譯後續模組,語言伺服器則在問題 import 上顯示診斷訊息。此改動由 Giacomo Cavalieri 貢獻。

字串模式比對效能優化

單字元字串前綴比對在 JavaScript 目標上經過優化。以 glance 套件實測,中位執行時間從 14.76 ms 降至 11.06 ms,約 30% 改善。由 Rebecca Reusch 和 Surya Rose 共同貢獻。

其他改動

整數模式比對新增對超過 52 位元數值的警告(在 JavaScript target 上浮點精度邊界);Unicode 字元檢測可防止形似字元導致的查找錯誤;語言伺服器新增移除匿名函式、提取函式為具名函式等程式碼動作;支援常數列表 prepending;擴展支援 mtsctsjsxtsx 副檔名。

原始來源:Gleam 1.16.0 — JavaScript Source Maps


JetStream 3:跨瀏覽器 JavaScript 與 WebAssembly 基準測試套件重大改版

WebKit Blog · 2026-04-22

Apple WebKit、Google Chrome 與 Mozilla Firefox 三方共同發布 JetStream 3,取代 JetStream 2,擴大覆蓋現代 JavaScript runtime 與 WebAssembly 執行情境。

設計目標與前代差異

JetStream 3 的設計目標是反映現代 Web 應用的實際執行模式:長時間執行的應用、複雜的 JavaScript 資料結構操作,以及 WebAssembly 模組與 JavaScript 的混合呼叫。前代 JetStream 2 的測試項目以短促的微基準為主,不能充分反映現代框架(如 React、Vue)或 WASM 計算任務的執行特性。

三方協作過程

此次改版為罕見的跨瀏覽器廠商合作:WebKit(Apple)、V8(Google)和 SpiderMonkey(Mozilla)工程師共同參與測試案例設計與審查,目的是確保測試項目對任何一方的 JIT 編譯策略都不存在特定偏向。基準套件的開放原始碼版本發布於 WebKit 的存儲庫。

新增測試情境

新版本涵蓋 JavaScript 物件模型(隱藏類別轉換壓力測試)、大型 WASM 模組的啟動延遲、JS 與 WASM 的雙向呼叫邊界成本,以及正規表示式引擎效能。評分採用幾何平均數,與 JetStream 2 一致,但子測試組成已大幅調整,因此兩版本分數不具直接可比性。

原始來源:Introducing the JetStream 3 Benchmark Suite — WebKit Blog


End of article
0
Would love your thoughts, please comment.x
()
x