微信公众号开发引发的-svelte框架开发指南

前言

最近开发了企业微信嵌入H5项目，本来打算用prettier-vue3开发的，demo测试的时候发现不兼容proxy，企业微信用的webview嵌入的浏览器内核是chrome 53,且现在最新版本的企业微信嵌入的内核还是50多，这就是三年前的版本，官方不更新，求人不如自力更生，所以想其他办法，本来业务不多，用vue或者react有点大材小用，偶得一框架Svelte，发现很适合我们的场景。

思考：凡是这种对兼容性要求高的，最好用原生js写，如果项目大，一定用框架提前考虑好兼容性，和解决方案。

企业微信开发的同学慎重开发

Svelte —— No Runtime 无运行时代码 的框架

打包体积更小

Vue和React是基于运行时的框架，打包出来的代码都会包含它自身的runtime代码。 而Svelte的做法则是在编译时减少运行时的代码， 尽量减小打包后代码中包含的runtime代码。而且像上面介绍的他不基于Virtual Dom，因此Svelte打包后的代码体积相比其他框架的小许多。

下面是Jacek Schae大神的统计，使用市面上主流的框架，来编写同样的 Realword 应用的体积：

可见Svelte构建的应用体积很小吗，有绝对的优势。但是这这比较是片面的

其实对于 Svelte 这个包大小这个问题，其实很早之前在 Svelte Github 中也对 React 和 Svelte 进行了广泛的讨论。

Svelte 确实有一个阈值会使得它在一定程度后让体积大小没有了优势，但是在一般情况下，只要不是特别复杂的中后台管理应用，Svelte 应当会比其他框架体积小。

在一些 H5 游戏中，如果你想要获得 React/Vue 数据驱动的方式编写应用，但是你又不想要引入他们这么大的运行时，确实来说是一个非常不错的方案。

或者嵌入到其他应用的的移动端网页，有一个初步的估计大约比使用 React 减少 30 – 50% 的体积，具体的数值因为还没迁移完无法给出完整的数据。还有一点，非运行时的框架，对于首屏的渲染也是有一个极大的帮助，你可以将首屏组件进行拆分，非运行时的首屏组件其实是非常小的，这对移动端来说非常的友好，因为毕竟使用 SSR 对应服务端还是有一定的压力要求的。

更少的代码量

Svelte中的写法设计的更人性化，相比其他框架可以在开发中只需更少的代码。 在Svelte官网它们中举了个例子，当声明一个组件状态时：

这是React的代码

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

function increment() {
  setCount(count + 1);
}
复制代码
复制代码

这是Svelte的代码

let count = 0;

function increment() {
  count += 1;
}
复制代码
复制代码

相比React简洁了许多，而且感觉就像我们平时写的JavaScript一样，更方便阅读。

无Virtual Dom

我们都知道Vue，React中都使用到了Virtual Dom来对Dom进行更新。Virtual Dom会把页面Dom变为树结构的数据存在内存中，每次修改组件中的状态时，会生成一个新的Virtual Dom与旧的Virtual Dom进行对比生成一个补丁，用diff 计算出更新哪些dom。等到真正修改完毕时在去更新真实的dom节点。当然框架中的Virtual Dom要比我说的实现的复杂的多。

而sveltedom 是把数据和真实dom之间的映射关系，在编译的时候就通过AST等算出来，保存在p函数中，Svelte修改更新Dom节点使用了纯JavaScrip实现不依赖任何框架。 因为不依赖Virtual Dom因此初始化和更新时工作都小了许多，从而使页面启动和运行都会更加迅速。

响应式

Svelte它也为我们实现了像Vue那样的状态响应式，当某个状态修改状态时组件就会进行更新。这可以让我们更好的封装组件。而且写法就和正常声明变量一样，但是Svelte会在编译时为你自动注入响应式代码。

count += 1;
复制代码
复制代码

Svelte在编译时，当编译时自动加上响应式代码

count += 1; $$invalidate('count', count);
复制代码
复制代码

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。

是不是很惊奇？另外一个前端框架性能对比的项目也给出了同样的答案：github.com/krausest/js…

为什么 Svelte 性能还不错，至少没有我们预期的那么糟糕？我们接下来会在原理那一小结来介绍。

Svelte 劣势

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

和Vue， React框架的对比

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

我们在用 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 用来开发官网的模板

开发官网的模板

教程和体验地址

svelte mdn

svelte github

svelte 在线体验地址

svelte 框架

中文Material UI

英文Material UI

• 参考文档
• 参考文档