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

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

性能提升

此版本會產(chǎn)生更小、更快的水合代碼。要查看影響，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 支持，這需要分發(fā) CJS 構建，一旦 eslint 重寫完成，Svelte 包大小可能會再下降 50% 以上。

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

開發(fā)者體驗

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

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

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

更新官網(wǎng)、文檔、教程

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

遷移

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

Svelte 5

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

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

相關鏈接

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

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