【Svelte从入门到精通】入门篇——背景

是什么

对于国内前端开发者来说，前端框架首选无疑是React和Vue、退而其次是Angular。从本章开始，笔者将和大家一起了解一个不同于React和Vue等以虚拟DOM为核心的框架，它在国外的关注程度一度超过了前端框架的龙头React，这个框架就是------Svelte。

Svelte在英文中具有"苗条的，身材修长的"意思，对于刚接触的开发者来说，非常容易与Java的Servlet搞混。Servlet是运行在Web服务器中的小型Java程序，其是JavaWeb的三大组件之一，而Svelte则是一个前端UI框架，更准确地说，Svelte是一个编译器。

作者

正如我们提到React会想到Dan Abramov，提到Vue会想到Evan You，那Svelte的创建者Rich Harris，在前端业界也享誉盛名。也许有些开发者不了解Rich Harris是何人，那和webpack齐名的打包工具Rollup便是出自此人之手。除了Rollup之外，Rich Harris还开发了Reactive、Svelte等诸多流行的开源作品，积极地投身于开源当中。 Svelte是Rich Harris在《卫报》工作时的成果。Rich Harris曾担任《卫报》美国版的互动编辑。在加入卫报英国互动团队担任前端开发人员之前，他曾在 Citywire 担任财经记者、视频记者和网络制作人。

历史

Svelte的前身是发布于2013年的Ractive.js，后者几乎与React同时问世。Reactive.js的灵感来自于 Knockout 和 Angular 以及当时其他一些东西的混搭。经过几年的实践，Rich Harris觉得Reactive.js并不是真正适合移动互联网时代的框架，于是在BrooklynJS聚会上和友人提出了自己的框架新想法------写一个编译器。

Svelte的第一个版本，基本上就是多了一个编译器的Reactive。因为当时《卫报》的同事在使用Reactive，且拥有一个现成的Reactive社区，为了能够更好地推广Svelte，Svelte第一版继承了Reactive的许多相同设计，让使用过Reactive的开发者能够快速上手Svelte。Svelte 这个名字是由Rich Harris和他在《卫报》的同事们选择的。随着时间的推移，越来越多的开发者开始了解Svelte,并对其产生了兴趣。

之后，Svelte开发团队意识到 Ractive 的一些设计决策是错误的，因此 Svelte 2 实际上只有一些小小的改进。例如，在模板语法中不再使用双花括号，而是使用单花括号，因此这更像是 JSX，并且还进行了一些其他类似的修饰性更改。但除此之外，它与 Svelte 1 几乎相同。

第三版是一次重大修改，Svelte开发团队开始重新思考现代 UI 框架的核心概念：反应性。到2019年，Svelte已经成为一个成熟的工具，可以构建具有TypeScript支持的开箱即用的Web应用程序。

经过4年的时间，Svelte4在2023年成功发布。Svelte4作为一个过渡版本，可以比作是React16 到18之间React 17版本，为下一代 Svelte（即 Svelte 5）的发布奠定了基础。

怎么样

凡是都有双面性，当我们要学习一个新事物时，需要斟酌思考这件事物值不值得我们学习，了解其在当前的优劣两面，是一个很好的切入点，针对框架亦是如此。

优势

性能

通过benchmark上的性能对比，我们可以看到Svelte除了稍逊于Solid外，整体的表现优于React、Vue和Angular等前端框架。

再看一下Jacek Schae在2020年对各框架的RealWorld的Lighthouse跑分。

Rich Harris 的virtual-dom-is-pure-overhead一文中，指出虚拟DOM并非免费的午餐，它也会带来性能和内存上的消耗。对于一个React组件来说，要把 props的值进行修改，需要分为三步：

记录下前后两次虚拟DOM的快照，对相同的节点进行比较
把该节点上所有的属性进行新旧对比，记录下变动的内容
更新真实DOM

Svelte则是省去前面两步，直接更新DOM。Svelte是一个编译器，不使用虚拟DOM。Svelte.js 在构建时编译组件，从而产生高度优化的轻量级 JavaScript 代码。与其他在运行时依赖虚拟 DOM的框架不同，Svelte.js 完全消除了对虚拟 DOM 的需求，从而实现更快的加载时间、更流畅的动画并提高 Web 应用程序的整体性能。这是Svelte相对于其他任何Web框架的一个非常重要的优势。

体积

同样是Jacek Schae的框架体积分析。Svelte在这块内容中遥遥领先。

对于由使用框架后生成的代码行数中，Svelte同样拥有不俗的表现。虽然使用Svelte来编写的业务代码在编译后会产生较多的代码，但得益于较少的运行时代码，对于一般的中小型项目来说，整体的代码体积仍是比较小的。

在npmtrends中显示的size，2.7KB同样遥遥领先。

与React、Vue、Angular等框架不同，Svelte不需要在代码运行时引入运行时代码。整个框架在构建过程中被编译掉，留下优化的 JavaScript 代码，直接与浏览器的本机 API 交互。这也是Svelte拥有更小的包体积、消耗更少内存而拥有更好性能的原因之一。

在代码体积的优势宣传中，Evan You曾提出一种质疑，为此还专门写了一个项目来对比Svelte和Vue。

从文章中的结果我们可以得出以下结论：

编译后的 Svelte 组件代码比 Vue 3 等效代码重70% ，在 SSR 模式下重110%
对于应用程序来说，当编写的组件超过19个组件这个阈值（SSR模式为13个组件）时，Svelte的优势与Vue3相比逐渐下降。

因此我们可以得出一个观点，虽说svelte项目的代码较小。但对于大型项目而言，随着业务的推进，业务复杂程度逐渐提升，项目文件大小逐渐增多，编译后的代码量陡增，使用Svelte的大型项目体积并不会比React、Vue等小，因此我们需要辩证看待体积优势问题。

心智负担

Svelte语法简单，上手容易，学习曲线小。任何学过html，css和javascript的开发者都能上手。Svelte允许使用者使用足够少的代码来完成功能运行，比如一段最简单的代码：

html 复制代码

<script>
  let count = 0;
</script>

<button on:click={() => count++}>add</button>

Svelte帮助开发者以最小的代价构建用户界面，通过实现更好的反应性、绑定和顶层元素等，提高了代码的可读性，降低了开发者的心智负担和上手难度。

关注度

Svelte的以上特性让其在国外前端圈大放异彩。

首先是在Github上，达到了75k以上的Star。

在risingstars的2023年报告上。可以看到Svelte在Github上星数上涨在前端框架中排名第三。

在stateofjs的2022年度报告中（笔者在写文章时2023年报告结果暂时未出），Svelte的关注度和满意度都名列前茅。

劣势

生态

在2016年才发布的Svelte，生态明显还达不到React和Vue的丰富程度。

代码冗余

编译后的代码逻辑冗余。也许有读者会担心，如果业务逻辑复杂，导致编译之后的代码文件大小直线上升，是否会在一定程度上导致性能下降？Github上有相关开发人员对于这个问题进行了分析svelte-it-will-scale：

文章中指出，拐点约为 120KB 的组件源代码。即是说，在大约 120KB 时，使用编译器相对于运行时的大小优势已经消失了。但实际上，只要合理地使用代码分割，单文件出现120KB的情况是不太可能的。

抽象能力

因为Svelte不使用虚拟DOM，自然享受不到虚拟DOM带来的诸多好处，比如基于虚拟DOM来抽象各端渲染能力，基于vdom来完成测试等功能。

推广

看一下三大框架在过去一年的下载量。

虽然Svelte在国外已经风靡数时，但其下载量目前仍然无法和Vue相比，对比第一梯队的React，更是难以望其项背。同样在国内的推广程度仍不够高。

为什么

为什么我要学习Svelte？这里笔者简单的给出几点理由：

技术创新。当今的前端框架中，虚拟DOM的实现方式大行其道。不同于虚拟DOM的实现方式，Svelte以静态编译的方式实现了前端框架的响应性，这不仅开拓了我们的技术视野，也提升我们在开发中除了要拥抱潮流外，同样需要思考与创新。
性能。在中小型业务中的性能表现优秀。
学习曲线。上手简单，心智负担低。
国际化。Svelte在国外能够有如此高的呼声，自然有自身的吸睛点。我们不能固步自封，把自己的技术栈局限于React和Vue，学习Svelte能够让我们加入到前端新浪潮中，与国际前端圈接轨，减少彼此之间的信息差。同时，因为Svelte起步晚，有些生态库不够全面，如果读者你恰好是开源开好者，稍显贫瘠的生态土壤正是你大显身手的好时机。

小结

本章我们学习了：

Svelte是一个新兴的前端框架，它与React、Vue等以虚拟DOM为核心的框架不同，Svelte在静态编译阶段就分析出变量之间的相互作用，核心是一个编译器。
Svelte的作者是Rollup的开发者Rich Harris。
Svelte有体积小、上手简单等优势，同时生态不够丰富也是它的劣势之一。