Skip to main content

发布 Svelte 4

性能提升、开发者体验更新，以及网站改版

Svelte 团队

经过数月的努力，我们很高兴正式发布 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 界面。通过观看 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 现在成为过渡动画的默认选项，以避免动画阻塞页面过渡；预处理器现在更容易编写；多项修复使 CSP 的设置和使用更加便捷。

对于使用 Web 组件的用户，最大的变化是对使用 Svelte 编写自定义元素方式的全面重构。通过改变生成方式，一整类的错误和不一致问题得到了消除。

最后，我们还对 IDE 的编写体验 做出了一些改进：

  • 在 Svelte 模块中，cmd+click 现在会跳转到实现，而非 .d.ts 文件。
  • 引入自 svelte/internal 的导入项现在被隐藏，不会干扰自动完成建议。
  • 自动导入现在工作得更可靠。

网站、文档和教程更新

官方的 svelte.dev 网站已经进行了一次全面改版。它现在被拆分为多个页面，改进了移动端导航，重写了 TypeScript 文档，新增了暗黑模式，以及增强的 REPL。SvelteKit 网站也在进行相应的更新。我们还更新了所有教程链接，指向新的教程体验。

请继续关注，未来几天我们将发布更深入的博客文章，详细介绍所有网站更改！

迁移

大多数与 Svelte 3 兼容的应用和库应该也能兼容 Svelte 4。如果库作者在 peerDependencies 中指定了 svelte 的版本范围，则需更新为包括 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 创建的类似工作）一直在持续测试生态系统中的主要项目。