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生成的代码的阈值了。