SDK开发神器_Svelte

Svelte简介

Svelte英文本意苗条，是一款新兴的前端框架。凭借着体积小(无运行时代码)、高性能、Less-Code写更少的代码优点被预言未来会成为超过React、Vue的框架。

优势

体积小，无运行时代码

主流框架React和Vue都是运行时框架，当组件状态更新时，框架会根据最新的组件状态，计算出需要更新的Dom。这就意味着最终打包产物也会将这些diff代码打包进去，增大打包产物体积。

框架	体积
Vue	58.8K
React16+React Dom	97.5K

如果我们用React开发一个简单页面或者SDK，那这个项目最少得100K起步。React打包产物远远大于业务代码，非常的恐怖。当然如果开发的是大型项目，100K可以忽略。

基于该特性，当我们的页面简单或者开发SDK时，特别适合用Svelte，体积优势特别明显。

高性能

在Virtual Dom主导前端框架的时代，Svelte独树一帜，生成其没有Virtual Dom。至于为什么Svelte抛弃了Virtual还能保持高性能，本篇不做陈述，后续会专门解读其原理。

让我们看下Svelte的性能如何

可以看出，Svelte的性能稍逊于Vue，但好于React。

Less Code，写更少的代码

同样的逻辑，Svelte的代码量更少，易读性更高。

React

const [count, setCount] = useState(0);
function increment() {
  setCount(count + 1);
}

Svelte

let count = 0;
function increment() {
  count += 1;
}

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

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

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

劣势

生态系统相对较小：与React或Vue等更为成熟的框架相比，Svelte的社区和可用的第三方库要小得多。这意味着开发者可能需要自己动手实现一些功能或者依赖较少维护的插件。

学习曲线：虽然对于有经验的JavaScript开发者来说，Svelte的学习曲线可能并不陡峭，但是它的响应式编程模型和语法糖（syntactic sugar）对于新手来说可能需要时间适应。