目录结构
说在前面
关于虚拟DOM
业内大牛如何看待 svelte
关于UI
svelte 与其他框架
-
开始打包
对比大小
性能考核
对比性能
使用svelte 模板
下载依赖
启动项目
打开页面
安装ui
简单了解语法
-
传值
绑定数据
条件渲染
循环渲染
事件绑定
组件
动画
生命周期
案例
注解
参考文献
说在前面
svelte
不知道大家有没有了解过,最近一次偶然刷文章,看到一篇《都快2020年,你还没听说过SvelteJS?》 [0] 的文章,看了svelte与其他框架的对比
svelte 中文 doc [1]
对比各框架开发的项目的尺寸
对比各项目的 Lighthouse 性能评分
说实话属实有点惊讶到我。 ** 真的假的?
于是我抱着试试就试试的心态来做个评测人
关于虚拟DOM
svelte 的作者 Rich Harris 在一篇名为《虚拟DOM纯粹是开销》 [2] 的文章中指出,为什么不使用虚拟dom
虚拟dom的三个步骤
两个快照都包含一个元素。在两种情况下都是
<div>
,这意味着我们可以保留相同的DOM节点我们列举了新旧属性上的所有属性,
<div>
以查看是否需要更改,添加或删除任何属性。在这两种情况下,我们都有一个属性-aclassName
的值为"greeting"
下降到元素中,我们看到文本已更改,因此我们需要更新真实的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
对比大小
排名如下
svelte — 89.9 KB
vue — 483 KB
react — 490 KB
果然差距还是确实如传说一样恐怖
性能考核
严老湿本次使用 Chrome 的 Lighthouse (谷歌网页性能分析工具) 来对比性能评分
全局安装 lighthouse
npm install -g lighthouse
执行 (直接使用的对应的线上地址)
lighthouse https://realworld.svelte.dev/