Svelte

Svelte

Svelte 简介

在最新的《State of JS survey of 2020》中，它被预测为未来十年可能取代React和Vue等其他框架的新兴技术。如果你不确定自己是否该了解 Svelte，可以先看一下 Svelte 的一些发展趋势。

开发者满意度

从2019年开始, Svelte出现在榜单中。刚刚过去的2020年，Svelte在满意度排行榜中超越了react，跃升到了第一位。

开发者兴趣度

在开发者兴趣度方面，Svelte 蝉联了第一。

市场占有率

如果你在19年还没有听说过Svelte，不用紧张，因为svelte 当时仍是小众的开发框架，在社区里仍然没有流行开来。

Svelte 优势有哪些

我们先来看一下 Svelte 和React，Vue 相比，有哪些优势。

No Runtime —— 无运行时代码

React 和 Vue 都是基于运行时的框架，当用户在你的页面进行各种操作改变组件的状态时，框架的运行时会根据新的组件状态（state）计算（diff）出哪些DOM节点需要被更新，从而更新视图。

这就意味着，框架本身所依赖的代码也会被打包到最终的构建产物中。这就不可避免增加了打包后的体积，有一部分的体积增加是不可避免的，那么这部分体积大约是多少呢？请看下面的数据：

常用的框架中，最小的Vue都有58k，React更有97.5k。我们使用React开发一个小型组件，即使里面的逻辑代码很少，但是打包出来的bundle size轻轻松松都要100k起步。对于大型后台管理系统来说，100k 不算什么，但是对于特别注重用户端加载性能的场景来说，一个组件100k 多，还是太大了。

如果你特别在意打包出来的体积，Svelte 就是一个特别好的选择。下面是Jacek Schae大神的统计，使用市面上主流的框架，来编写同样的Realword 应用的体积：

可以看出，Svelte的bundle size大小是Vue的1/4，是React的1/20，体积上的优势还是相当明显的。

Less-Code ——写更少的代码

在写svelte组件时，你就会发现，和 Vue 或 React 相比只需要更少的代码。开发者的梦想之一，就是敲更少的代码。因为更少的代码量，往往意味着有更好的语义性，也有更少的几率写出bug。

下面的例子，可以看出Svelte和React的不同：

React 的代码

const [count, setCount] = useState(0);

function increment() {
  setCount(count + 1);
}

Svelte 的代码

let count = 0;

function increment() {
  count += 1;
}

虽然用上了16版本最新的 hooks，但是和svelte相比，代码还是很冗余。

在React中，我们要么使用useState钩子，要么使用setState设置状态。而在Svelte中，可以直接使用赋值操作符更新状态。

如果说上面的例子太简单了，可以看下面的统计，分别使用 React 和 Svelte 实现下面的组件所需要的代码行数

下面还是 Jacek Schae 老哥的统计，编写同样的Realword 应用，各个框架所需要的行数

Vue 和 React 打了平手，Svelte 遥遥领先，可以少些 1000 行代码耶！早日下班，指日可待。

Hight-Performance ——高性能

在Virtual Dom已经是前端框架标配的今天， Svelte 声称自己是没有Virtual Dom加持的， 怎么还能保证高性能呢？

性能测评

Jacek Schae 在《A RealWorld Comparison of Front-End Frameworks with Benchmarks》中用主流的前端框架来编写 RealWorld 应用，使用 Chrome 的Lighthouse Audit测试性能，得出数据是Svelte 略逊于Vue, 但好于 React。

另外一个前端框架性能对比的项目也给出了同样的答案：https://github.com/krausest/js-framework-benchmark。

Svelte 劣势

说完了 Svelte 的优势，我们也要考虑到 Svelte 的劣势。

和Vue， React框架的对比

在构建大型前端项目时，我们在选择框架的时候就需要考虑更多的事情。Svelte 目前尚处在起步阶段，对于大型项目必要的单元测试并没有完整的方案。目前在大型应用中使用 Svelte , 需要谨慎评。

类目	Svelte	Vue	React
UI 组件库	Material design ( 坦率的说，不好用 )	Element UI / AntD	AntD / Material design
状态管理	官网自带	Vuex	Redux/MobX
路由	Svelte-router	Vue-router	React-router
服务端渲染	支持	支持	支持
测试工具	官方网站没有相关内容	@vue/test-utils	Jest

我们在用 Svelte 开发公司级别中大型项目时，也发现了其他的一些主要注意的点

• 没有像AntD那样成熟的UI库。比如说需求方想加一个toast提示，或者弹窗，pm：”很简单的，不用出UI稿，就直接用之前的样式好啦~“

但是 Svelte 需要从0开始 ”抄“ 出来一个toast或者弹窗组件出来，可能会带来额外的开发量和做好加班的准备。

• Svelte 原生不支持预处理器，比如说less/scss，需要自己单独的配置 webpack loader。

• Svelte 原生脚手架没有目录划分

• 暂时不支持typescript，虽然官方说了会支持, 但是不知道什么时候.

还需要注意的一点是，React / Vue等框架自带的runtime虽然会增加首屏加载的bundle.js，可是当项目变得越来越大的时候，框架的runtime在bundle.js里面占据的比例也会越来越小，这个时候我们就得考虑一下是不是存在一个Svelte生成的代码大于React和Vue生成的代码的阈值了。

参考资料

新兴前端框架 Svelte 从入门到原理