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 系统前端等