曾遭尤雨溪嫌弃的 Svelte 终于进化至 4.0

关注

原创 2023-06-25 14:46:08 794 阅读 AI 写同款· GEO 优化 ›

深入解析 Svelte：下一代前端框架的革命 Svelte 是一款前端框架，与 React、Vue 等传统框架不同，它采用方式来优化前端应用。它不像 React 或 Vue 依赖虚拟 DOM，而是在编译阶段直接生成高效的原生 JavaScript 代码，使其拥有。阅读详情

前言

不知大家听没听说过 Svelte 这个框架，这个框架在国外非常有名，并且呼声很高。虽然目前无论是从生态、成熟度、使用人数以及知名度上都无法与 Vue 进行抗衡，但它的增长态势令人十分汗颜，即使是 Vue 也不得不正面直视这个潜力无比巨大的竞争对手。

但在国内相对而言它就不那么出名，多种因素都制衡了它的发展。首先就是 Svelte 这个单词不是很好读，英语不过关的人也不太容易通过这个单词来推测它的发音，甚至有相当一部分人到现在也不知道这单词该怎么读。其次就是写起来也麻烦，这个单词实在是太长了，它和 Vue 一样，都采用了单文件组件的形式，甚至它的 VSCode 插件都是从 Vue 原来的 VSCode 插件 Vetur 那魔改来的。假如我们想创建一个叫 Component 的组件：

Vue：Component.vue
Svelte：Component.svelte

每次创建组件的时候都要写这么长串个单词会让人觉得很难受，不仅是写着别扭，看着也不太舒服：

尤其是这个单词还很容易拼错，因为它还和其它一些单词十分相似（如：Servlet）

推荐大家去看看《看完 Svelte 纪录片才知道它为什么在国外比国内火》这篇文章，里面就记录了该作者为啥要给自己的框架起个这么拗口的名字，而且最有趣的一点是 Svelte 这个单词在欧美也不是一个常见的单词，那边说人苗条都用 thin 这个单词，而不是 Svelte。所以很多人以为这是个瞎编乱造出来的词，听起来有点像是洗碗机或者平板电脑之类的品牌：

Svelte 的意思是苗条的，因为它的一大卖点就是体积小，但实际上它的这个卖点只存在于小项目上，尤雨溪也曾在某问答平台上毫不留情的指出了它的问题：

这是外网广为流传的一张图：

蓝色 React，红色 Svelte，当组件数量达到 120 个以上时，Svelte 的优势便不复存在。但！这一缺陷即将得到缓解，随着 Svelte 4.0 的到来，Svelte 5 也快了。听到这有些朋友可能就懵了：

随着 Svelte 4.0 的到来，Svelte 5 也快了？要知道 Svelte 3.0 到现在的 4.0 可是足足有四年的时间，哪有刚发一个大版本紧接着又发一个大版本的？其实还真有：比方说大名鼎鼎的 React，它也是从 React 16 之后过了好几年才发 17 的吧？但才过了多久马上就 18。还有 Vite，这些可都是知名度很高的前端网红，是不是 Vite 3 之后马上就 Vite 4 了？

Svelte 4 也是同理，它有点类似于 React 从 16 到 18，17 只是个过渡版，是为了下一个大版本所进行的铺垫。即使是这样，Svelte 4 也依然带了了许多性能改进，已经不会像之前尤大说的那样，组件越多就越拉胯了。

Svelte 5 就不一样了，完全重写，除了再次大幅度提高性能之外，还带来了许多新功能，这次 Vue 真的要汗颜了💧

正文

该文来自于 Svelte 官网，地址：https://svelte.dev/blog/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 界面。观看Svelte Radio Live以了解有关此版本的更多信息。

性能

此版本会产生更小、更快的 SSR 代码。为了查看影响，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、首次在learn.svelte.dev上加载我们的交互式学习体验的用户、Svelte REPL 的用户以及连接受限(译者注：说的不是咱们吧？)的用户来说，这一改进尤其明显。剩余的包大小大部分是 eslint 支持，这需要分发 CJS 构建，一旦eslint 重写完成，Svelte 包大小可能会再下降 50% 以上。

Svelte 中的依赖项数量已从 61 个大幅减少到 16 个。这意味着我们的用户下载速度更快，并且更不容易受到供应链攻击。我们还稍微减少了最新版本 SvelteKit 中的依赖项数量。

向下兼容

Svelte 4 使 Svelte 创作体验更加直观和一致：|local现在是过渡的默认设置，以避免动画阻塞页面过渡，预处理器现在更易于编写，多个修复使 CSP 更易于设置和使用。

对于 Web Components 的用户来说，最大的变化是使用 Svelte 创作自定义元素的方式的彻底改变。通过改变它们的生成方式，消除了一整类错误和不一致行为。

最后，我们还对 IDE 创作体验进行了一些改进：在 Svelte 模块中使用 cmd + 单击现在可以带您进入实现，而不是 .d.ts 导入的文件，svelte/internal 现在被隐藏，并且不会自动完成、自动导入，现在变得更加稳定可靠。

更新了官网、文档和教程

官方网站svelte.dev已进行全面改版。它现在分为多个页面，具有改进的移动导航、彻底修改的 TS 文档、深色模式和增强的 REPL。SvelteKit 网站也正在更新以配合。我们更新了所有教程链接以指向我们新的learn.svelte.dev体验。旧教程仍然适用于 Safari 16.3 及更早版本的用户。

请继续关注有关未来几天内所有网站更改的更深入的博客文章！

迁移

大多数与 Svelte 3 兼容的应用程序和库应该都与 Svelte 4 兼容。如果在 peerDependencies 中指定了 Svelte，库作者将需要将版本更新成 Svelte 4。对于应用开发来说，最常见的更改是更新工具以满足新的最低版本要求，例如 Node 16。许多其他迁移步骤可以使用 npx svelte-migrate@latest svelte-4.

请阅读迁移指南以获取完整详细信息。

Svelte 5: 下一代 Svelte

Svelte 5 将重写 Svelte 编译器和运行时。Svelte 4 主要是通过采用现代工具并放弃对各种技术的某些旧版本的支持，为未来的改进奠定基础。这些更改将以多种方式帮助我们，例如能够更轻松地比较 Svelte 5 和 Svelte 4 代码库，并能够针对新实现运行现有测试。Svelte 5 将为 Svelte 带来重大新功能和性能改进。更改仍在酝酿中，尚未准备好分享，但请继续关注！

结语

说实话看完这篇文章我不由得为 Vue 捏了一把汗，因为 Svelte 在国外的热度数据十分惊人：

一共有七万多名开发者接受了调查，蓝色代表渴望，红色代表欣赏，也就是说有四分之三的开发者都十分欣赏 Svelte，遥遥领先其他框架：

而且从这一回答就能够侧面体现出 Svelte 的火爆程度：

那时候还只是 2021 年，如今都 2023 了，火爆程度与之前相比可谓有过之而无不及。但有人可能会问：如果真的那么火的话，也没见多少人用啊？都是叫好不叫座吧？

这么说确实有一定的道理，因为 Svelte 其实还是有着较为明显的短板的，比方说尤大说的那几点，但这次更新已经大幅度改善了，不过依然还是没改善到能让这两条线不相交的程度：

但 Svelte 5 完全重写后可就不一定了，如果真的能把这些缺点全部解决的话，那尤雨溪可真的就要哭晕在厕所了：

剩下的生态也会慢慢发展起来的，绝对会大幅度蚕食 Vue 的市场份额，因为现在的 Vue 每次更新都要往里加语法糖，争议极大：

而且它确确实实正在变得越来越臃肿，一行都快写不下了：

<script lang="ts" setup generic="T extends { name: string }">
</script>

鬼知道 Vue3.4、3.5、3.6、甚至是 4.0 会变成什么鬼样子！而 Svelte 反而让人找到了当初 Vue 2 那种简单易上手的感觉，语法糖就一个 $:，触发更新也好记，只有等号 = 才会触发更新。不过在中国 Svelte 还是无法撼动 Vue 的地位，之前 Vue 正是凭借简洁易用等优势在各大培训机构里获得了老师们的青睐，老师讲啥底下的学生就学啥，一批批 “Vue” 开发者大批量的涌入市场，进一步提升了 Vue 的市场份额。但目前明显是 Svelte 更简单，只不过在中国没人会招只会 Svelte 的前端，所以为了就业，培训班们估计也不会教。