時隔四年，6 月 22 日，前端框架新寵 Svelte 發布了全新的主要版本：4.0。Svelte 4 主要是一個維護版本，提高了最低版本要求，并在特定領域優化了設計。它為下一代 Svelte 發布（Svelte 5）奠定了基礎。

如果你還沒有嘗試過 Svelte，可以在交互式教程[1]、StackBlitz[2] 或使用 npm create svelte@latest 在本地進行嘗試。Svelte 可以輕松地將 HTML、CSS、JS 和 Svelte 編譯器的強大功能組合在一起，構建 Web 用戶界面。

性能提升

此版本會產生更小、更快的水合代碼。要查看影響，SvelteKit 用戶可以通過檢查 .svelte-kit/output/client/_app/immutable/nodes 文件夾來查看其編譯輸出大小的縮小。例如，在 kit.svelte.dev 上，整個站點生成的 JS 大小減少了 12.7%（126.3 kB 至 110.2 kB）。

Svelte 4 將 Svelte 包大小減少了近 75%（10.6 MB 減少到 2.8 MB），這意味著 npm 安裝的等待時間更少。對于首次在 learn.svelte.dev 上加載交互式學習體驗的用戶、Svelte REPL 的用戶以及連接受限的用戶來說，這一改進尤其明顯。剩余的包大小大部分是 eslint 支持，這需要分發 CJS 構建，一旦 eslint 重寫完成，Svelte 包大小可能會再下降 50% 以上。

Svelte 中的依賴項數量已從 61 個大幅減少到 16 個。這意味著用戶下載速度更快，并且更不容易受到供應鏈攻擊。除此之外，還稍微減少了 SvelteKit 最新版本中的依賴項數量。

開發者體驗

Svelte 4 使 Svelte 開發體驗更加直觀和一致：|local 現在是過渡的默認設置，以避免動畫阻塞頁面過渡，預處理器現在更易于編寫，多個修復使 CSP 更易于設置和使用。

對于 Web components 的用戶來說，最大的變化是使用 Svelte 開發自定義元素的方式的徹底改變。通過改變它們的生成方式，消除了一整類錯誤和不一致。

最后，還對 IDE 開發體驗進行了一些改進：使用 cmd+點擊（或相應的快捷鍵）在 Svelte 模塊中會跳轉到實現代碼，而不是 .d.ts 文件；來自 svelte/internal 的導入現在已經隱藏，不會干擾自動補全建議；自動導入功能現在更加可靠。

更新官網、文檔、教程

該版本對官方網站 svelte.dev 進行了全面改版。現在，它被分成多個頁面，具有改進的移動導航、全新的 TypeScript 文檔、深色模式和增強的 REPL。SvelteKit 網站也正在進行更新以匹配這些改變。除此之外，還更新了所有教程鏈接，將其指向新的 learn.svelte.dev。舊的教程仍然可供使用 Safari 16.3 及更早版本的用戶。

遷移

大多數與 Svelte 3 兼容的應用和庫應該也兼容于 Svelte 4。庫的作者需要更新版本范圍，以包含 Svelte 4，如果在 peerDependencies 中指定了 svelte。對于應用的作者而言，最常見的更改是更新工具以滿足新的最低版本要求，比如 Node.js 16。許多其他遷移步驟可以使用 npx svelte-migrate@latest svelte-4 命令處理。

Svelte 5

Svelte 5將是Svelte編譯器和運行時的重寫版本。Svelte 4 主要是通過采用現代工具鏈和放棄對某些舊版打包工具等各種技術的支持，為未來改進奠定了基礎。這些變化將以多種方式幫助我們，例如更容易比較 Svelte 5 和 Svelte 4 的代碼庫，以及能夠運行現有測試以驗證新實現的正確性。Svelte 5將為 Svelte 帶來重大的新功能和性能改進。這些變化正在進行中，尚未準備好，敬請關注！

Release Note：https://svelte.dev/blog/svelte-4。

相關鏈接

[1]交互式教程: https://learn.svelte.dev/。

[2]StackBlitz: https://sveltekit.new/。