当前速看：前端框架新宠 Svelte 4.0 正式发布！

6 月 22 日，前端框架新宠 Svelte 发布了全新的主要版本：4.0。Svelte 4 主要是一个维护版本，提高了最低版本要求，并在特定领域优化了设计。它为下一代 Svelte 发布（Svelte 5）奠定了基础。

(资料图片仅供参考)

时隔四年，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/。

关键词：