6 月 22 日，前端框架新寵 Svelte 發(fā)布了全新的主要版本：4.0。Svelte 4 主要是一個(gè)維護(hù)版本，提高了最低版本要求，并在特定領(lǐng)域優(yōu)化了設(shè)計(jì)。它為下一代 Svelte 發(fā)布（Svelte 5）奠定了基礎(chǔ)。

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

(資料圖片僅供參考)

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

性能提升

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

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

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

開發(fā)者體驗(yàn)

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

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

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

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

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

遷移

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

Svelte 5

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

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

相關(guān)鏈接

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

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

關(guān)鍵詞：