都快1202 年了，你还不知道 svelte？

目录结构

• 说在前面

• 关于虚拟DOM

• 业内大牛如何看待 svelte

• 关于UI

• svelte 与其他框架

• • 开始打包

  • 对比大小

  • 性能考核

  • 对比性能

• 使用svelte 模板

• 下载依赖

• 启动项目

• 打开页面

• 安装ui

• 简单了解语法

• • 传值

  • 绑定数据

  • 条件渲染

  • 循环渲染

  • 事件绑定

  • 组件

  • 动画

  • 生命周期

• 案例

• 注解

• 参考文献

说在前面

svelte 不知道大家有没有了解过，最近一次偶然刷文章，看到一篇《都快2020年，你还没听说过SvelteJS?》 [0] 的文章，看了svelte与其他框架的对比

svelte 中文 doc [1]

对比各框架开发的项目的尺寸

对比各框架开发的项目的尺寸

对比各项目的 Lighthouse 性能评分

对比各项目的 Lighthouse 性能评分

说实话属实有点惊讶到我。 ** 真的假的？

于是我抱着试试就试试的心态来做个评测人

关于虚拟DOM

svelte 的作者 Rich Harris 在一篇名为《虚拟DOM纯粹是开销》 [2] 的文章中指出，为什么不使用虚拟dom

虚拟dom的三个步骤

1. 两个快照都包含一个元素。在两种情况下都是<div>，这意味着我们可以保留相同的DOM节点

2. 我们列举了新旧属性上的所有属性，<div>以查看是否需要更改，添加或删除任何属性。在这两种情况下，我们都有一个属性-aclassName的值为"greeting"

3. 下降到元素中，我们看到文本已更改，因此我们需要更新真实的DOM

而 svelte 直接跳过前面两步，直接执行第三步

if (changed.name) {
  text.data = name;
}

这几乎就是Svelte生成的更新代码。与传统的UI框架不同，Svelte是一种编译器，它在构建时就知道应用程序中的情况如何变化，而不必等着在运行时进行工作。

业内大牛如何看待 svelte

vue 的作者尤雨溪，在知乎回答了个 《如何看待 svelte 这个前端框架？》 [3] 问题

“svelte 的核心思想在于 通过静态编译来减少框架运行时的代码”

关于 UI

我觉着这两个ui还是比较不错的

Material UI

https://sveltematerialui.com/

https://github.com/hperrin/svelte-material-ui

SVELTESTRAP

https://sveltestrap.js.org/

https://github.com/bestguy/sveltestrap

svelte 与其他框架

老严闲来的时候找到了 一个叫做 Realworld 存储库中有24种conduit实现As ，也就是用来对比性能的以及大小的；

今天一起来对比一下 vue/react/svelte 这三个框架的

• 项目打包后压缩包大小

• 项目网页性能分析对比

vue：https://github.com/gothinkster/vue-realworld-example-app

react：https://github.com/gothinkster/react-redux-realworld-example-app

svelte：https://github.com/sveltejs/realworld

感兴趣的同学也可以看看其他框架 https://github.com/gothinkster/realworld

开始打包

这三个项目，打包顺序基本上在同一时间执行 npm run build，svelte 直接在我我眨眼的一瞬间打完包 ，啪 很快啊 （有点夸张~几秒钟）

静静的等待vue和react同时打包完之后，我开始进行统一压缩静态文件，压缩格式为zip

对比大小

排名如下

1. svelte   —  89.9 KB

2. vue       —  483 KB

3. react     —  490 KB

果然差距还是确实如传说一样恐怖

性能考核

严老湿本次使用 Chrome 的 Lighthouse （谷歌网页性能分析工具） 来对比性能评分

全局安装 lighthouse

npm install -g lighthouse

执行 （直接使用的对应的线上地址）

lighthouse https://realworld.svelte.dev/