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

前言

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

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

  • VueComponent.vue
  • SvelteComponent.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 也是同理,它有点类似于 React161817 只是个过渡版,是为了下一个大版本所进行的铺垫。即使是这样,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 可让您利用 HTMLCSSJSSvelte 编译器的强大功能轻松生成 Web 界面。观看Svelte Radio Live以了解有关此版本的更多信息。

性能

此版本会产生更小、更快的 SSR 代码。为了查看影响,SvelteKit 用户可以通过 .svelte-kit/output/client/_app/immutable/nodes 文件夹来查看其编译输出的大小缩小。例如,在kit.svelte.dev上,整个站点生成的 JS 尺寸减少了 12.7%126.3 kb110.2 kb

Svelte 4Svelte 包大小减少了近 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 文档、深色模式和增强的 REPLSvelteKit 网站也正在更新以配合。我们更新了所有教程链接以指向我们新的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 5Svelte 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.43.53.6、甚至是 4.0 会变成什么鬼样子!而 Svelte 反而让人找到了当初 Vue 2 那种简单易上手的感觉,语法糖就一个 $:,触发更新也好记,只有等号 = 才会触发更新。不过在中国 Svelte 还是无法撼动 Vue 的地位,之前 Vue 正是凭借简洁易用等优势在各大培训机构里获得了老师们的青睐,老师讲啥底下的学生就学啥,一批批 “Vue” 开发者大批量的涌入市场,进一步提升了 Vue 的市场份额。但目前明显是 Svelte 更简单,只不过在中国没人会招只会 Svelte 的前端,所以为了就业,培训班们估计也不会教。

不过就算在中国的市场份额高点其实也没什么大不了的,因为中国都是一群白嫖怪,尤雨溪曾说给他捐赠的都是国外开发者(或公司),国内基本没有,他在国外的收入是国内的 20 倍!但这条评论目前找不到了,可能是他给删了吧,为什么要删呢?因为:

如果他想要钱,就不能留着那条评论,不然让人看了觉得很不爽(说国内开发者一毛不拔)这次他就聪明多了,说的很委婉:

很大一部分原因可能是支付渠道的问题

其实就是国内开发者太抠,白嫖惯了,大家都知道这个原因,但你要钱的时候可绝对不能这么说。

往期精彩文章

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值