Svelte 4 正式發布

經過數月的開發，我們很高興宣布 Svelte 4 的穩定版本正式發布。

時光飛逝 - Svelte 3 發布至今已超過四年！在 JavaScript 框架的時間尺度上，這已是漫長的歲月。Svelte 的新鮮感始終如一，但 Node.js 和瀏覽器 API 在這段期間不斷演進，今天我們更新了 Svelte，以充分利用這些改進。Svelte 4 主要是一個維護版本，提升了最低版本要求並在特定領域加強了設計。它為下一代 Svelte（即將以 Svelte 5 的形式發布）奠定了基礎 - 我們相信您會喜歡它。

如果您還沒有嘗試過 Svelte，請在我們的互動式教學、StackBlitz 上，或在本地使用 npm create svelte@latest 來體驗一下。Svelte 讓您可以輕鬆地利用 HTML、CSS、JS 和 Svelte 編譯器的強大功能來組合 Web UI。觀看Svelte Radio Live，以了解更多關於此版本的信息。

新功能

效能

此版本帶來更小、更快的 hydration（水合作用）程式碼。要查看影響，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 install 上的等待時間更短。對於首次載入我們的互動式學習體驗的使用者、Svelte REPL 的使用者以及連線能力有限的使用者來說，這種改進尤其明顯。其餘套件大小的大部分是 eslint 支援，這需要分發 CJS 建置版本，一旦eslint 重寫完成，Svelte 套件大小還可以再減少 50% 以上。

Svelte 中的依賴項數量已從 61 個大幅減少到 16 個。這意味著我們的使用者下載速度更快，也減少了遭受供應鏈攻擊的可能性。我們也稍微減少了最新版本 SvelteKit 中的依賴項數量。

開發者體驗

Svelte 4 使 Svelte 的撰寫體驗更加直觀和一致：|local 現在是 transitions 的預設值，以避免動畫阻礙頁面轉換，預處理器現在更容易編寫，並且有多個修復程式讓 CSP 更容易設定和使用。

對於 Web Components 的使用者來說，最大的變化是徹底修改了使用 Svelte 來編寫自訂元素的方式。透過更改它們的產生方式，消除了整類錯誤和不一致性。

最後，我們還對 IDE 撰寫體驗進行了幾項改進：在 Svelte 模組中 cmd+click 現在會將您帶到實作程式碼，而不是 .d.ts 檔案；來自 svelte/internal 的匯入現在已隱藏，不會使自動完成建議變得雜亂；自動匯入現在更可靠。

更新的網站、文件和教學

官方 svelte.dev 網站已進行全面改版。現在它分為多個頁面，具有改進的行動裝置導覽、經過全面修改的 TypeScript 文件、深色模式和增強的 REPL。SvelteKit 網站也正在更新以進行匹配。而且我們已經更新了所有教學連結，以指向我們新的教學體驗。

請繼續關注關於未來幾天網站所有變更的更深入的部落格文章！

遷移

大多數與 Svelte 3 相容的應用程式和程式庫都應該與 Svelte 4 相容。如果 svelte 在 peerDependencies 中指定，則程式庫作者需要更新版本範圍以包含 Svelte 4。對於應用程式作者來說，最常見的必要變更是更新工具以滿足新的最低版本要求，例如 Node.js 16。許多其他遷移步驟可以使用 npx svelte-migrate@latest svelte-4 進行處理。

請閱讀遷移指南以了解完整詳細資訊。

Svelte 5：下一代 Svelte

Svelte 5 將會是 Svelte 編譯器和執行階段的重寫版本。Svelte 4 主要旨在透過採用現代工具並放棄對一些舊版技術（例如舊版打包工具）的支援，為未來的改進奠定基礎。這些變更將在許多方面幫助我們，例如能夠更輕鬆地比較 Svelte 5 和 Svelte 4 的程式碼庫，以及能夠針對新的實作執行現有的測試。Svelte 5 將為 Svelte 帶來主要的新功能和效能改進。這些變更仍在開發中，尚未準備好分享，但請繼續關注！

變更日誌

請參閱變更日誌中的完整變更清單。

致謝

首先，感謝所有讓此版本發布成為可能的 Svelte 維護者和貢獻者。為此版本貢獻多個 PR 的開發人員有 @dummdidumm、@gtm-nayan、@benmccann、@tanhauhau、@Karlinator 和 @ngtr6788。此外，感謝許多捐款給Svelte OpenCollective 的社群成員 - 這些捐款贊助了由PuruVJ 完成的網站改版，以及 @gtm-nayan 最近的一些修復。

最後，感謝來自整個生態系統的各種程式庫維護者，他們協助準備此版本。感謝 @jessebeach 協助發布新版本的 aria-query 和 axobject-query，@jreinhold 確保與 Storybook 的相容性，以及 @yanick 更新 svelte-testing-library。為了確保一切正常運作，由 @dominikg 設置的svelte-ecosystem-ci — 仿照他為 Vite 做的類似工作 — 一直在持續測試生態系統中的主要專案。