Svelte 分析报告

Svelte 的定位

Svelte 将自己定于成编译器框架。在编译器中将声明式的代码(类似于 Vue)转换成原生 Javascript。同时, Svelte 对响应式编程支持的良好,开发者可以使用更少的代码完成数据到UI的开发工作。

Svelte 开发理念与 Vue 和 React 的组件开发理念相似,但实现方式与 Vue 和 React 有本质的不同。 Vue 和 React 都使用虚拟 DOM 的方式,在运行时对虚拟 DOM 的变更进行跟踪,并计算最小的 DOM 更新量。Svelte 是在编译时直接将应用编译成原生 Javascript 对 DOM 操作的接口。相比虚拟 DOM 的方式,Svelte 的方式打包后的代码体积更小执行效率更高。

Svelte 与 Vue 和 React 对比

最新稳定版本

Svelte Vue React
最新稳定版 v3.16.0 V2.6.10 V16.12.0

性能

Svelte 性能整体表现优于 Vue 和 React。在操作大规模 DOM 节点时,性能表现优于基于虚拟 DOM 的 Vue 和 React。 经过 Svelte 编译过的代码体积小,所以在首屏加载时有明显的优势。

类目 Svelte Vue React
创建 1000 行表格 132.3 ms 162.3 ms 165.7 ms
创建 10000 行表格 1,212 ms 1,252 ms 1,594.9 ms
在 1000 行表格中交换两行 51.8 ms 66.6 ms 429.6 ms
首屏加载时间 19.5 ms 59.6 ms 55.6 ms

性能数据来自 JS framework benchmark

构建大型项目

以下列举构在建大型项目时,框架需要具有的基本能力。 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

开源社区

React 在全球范围内拥有最多的贡献者,也客观反映出 React 是工程师参与度最高的前端框架。Svelte 作为新发布不久的框架,有着与 Vue 差不多的贡献者,可以反映出 Svelte 的受关注度高,发展迅速。建议密切关注 Svelte 的发展。

类目 Svelte Vue React
GitHub start 27.2 k 153 k 140 k
贡献者 246 位 282 位 1,340 位
最近一个月提交统计(Nov 4, 2019 – Dec 4, 2019) Excluding merges, 25 authors have pushed 114 commits to master and 148 commits to all branches. On master, 283 files have changed and there have been 4,388 additions and 2,107 deletions. Excluding merges, 2 authors have pushed 4 commits to dev and 8 commits to all branches. On dev, 2 files have changed and there have been 50 additions and 48 deletions. Excluding merges, 14 authors have pushed 56 commits to master and 56 commits to all branches. On master, 211 files have changed and there have been 15,165 additions and 2,353 deletions.

结论

综合以上分析,分析结论如下:

Svelte 提出的编译器框架方式是未来前端框架的发展趋势。编译器框架带来的优势非常明显:编译后代码体积小, 浏览器解析速度快。同时,Svelte 的响应式编程的支持更好,能节省代码量,并提高运行效率。

在小型项目中, Svelte 值得尝试,它能带来更快的加载速度,更快的性能,和更小的网络传输量。

在大型项目中,可以在需要性能优化的模块使用 Svelte 进行开发,并构建出纯 Javascript 组件供其他框架使用(此方案需要进一步验证)。

小型项目:不超过10个页面,简单跳转逻辑的应用。例如:移动端的一些 H5 活动宣传页,公众号应用等

大型项目:20 + 页面,有复杂业务逻辑的应用。 例如:中台系统前端,ERP 系统前端等

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342