关键词
前端框架、编译器、响应式、模板
介绍
Svelte /svelt/ adj. 苗条的；线条清晰的；和蔼的
Svelte是一个前端组件框架，就像它的英文名字一样，Svelte的目标是打造一个更高性能的响应性前端框架。
Svelte类似于React和Vue框架，提供模板语法和响应式编程。但是有一个重要的区别：Svelte是一个编译时的框架，在编译的过程中生成组件运行时的代码并实现响应式，而React和Vue则是基于虚拟DOM及Diff实现运行时的响应式。
这正是Svelte宣传的提高性能的核心实现。我们知道，原生的性能肯定是最高的，没有中间多余的转换和对比等框架层的逻辑消耗性能。或许有同学就会问，那我们在JQuery时代写的代码性能不是更好吗？为什么感觉上却没有比react和Vue写的应用性能好呢。我想，这主要是以下几个原因：
现在的硬件和网络带宽等资源已经比以往有了大幅度的提升，所以就算应用的体积较以往比较大，相比硬件等资源的提升，反而会感觉上性能更好；
JQuery是基于原生的DOM API封装和扩展了统一的接口，屏蔽了浏览器底层的差异。但是很多开发人员在使用时并没有考虑DOM变更对性能带来的影响，只是简单的用JQuery对DOM进行粗暴的全局更新；
Vue和React虽然是引入虚拟DOM，需要Diff等逻辑维护和更新实际的DOM树，但是框架本身做了优化，Diff算法和更新策略也有很大的提升，所以性能上并没有感觉比原生的差很多。
虽然Vue和React如今已经满足了前端大部分的场景，Svelte的目标是追求更好的性能 (所以前端是真的卷，总有人乐此不疲的遭轮子，但也正是这些人在推动着前端的不断发展) 。Svelte提供类似Vue单文件组件的模板语法，然后编译成原生JavaScript，提供了一套相对于我们自己操作DOM，更优雅，更高效的更新方案。我们可以基于Svelte官网提供的REPL直观的了解一下编译的过程：
组件文件源码，App.svelte实现了一个简单的点击按钮统计点击次数的功能。
// App.svelte
<script>
let clickCount = 0;
function click() {
clickCount += 1;
}
</script>
<button on:click="{ click }">click me { clickCount } { clickCount > 1 ? 'times' : 'time' }</button>
<style>
button {
cursor: pointer;
}
</style>
通过Svelte编译之后的代码如下，可以具体查看我的注释进行了解：
/* App.svelte generated by Svelte v4.1.1 */
import {
SvelteComponent,
append,
append_styles,
attr,
detach,
element,
init,
insert,
listen,
noop,
safe_not_equal,
set_data,
space,
text
} from "svelte/internal";
import "svelte/internal/disclose-version";
// 插入组件样式，Svelte会自动生成一个全局唯一的类名
function add_css(target) {
append_styles(target, "svelte-1hvi0n4", "button.svelte-1hvi0n4{cursor:pointer}");
}
// 1、生成HTML片段
function create_fragment(ctx) {
let button;
let t0;
let t1;
let t2;
let t3_value = (/*clickCount*/ ctx[0] > 1 ? 'times' : 'time') + "";
let t3;
let mounted;
let dispose;
return {
// c --> create 创建
c() {
button = element("button");
t0 = text("click me ");
t1 = text(/*clickCount*/ ctx[0]);
t2 = space();
t3 = text(t3_value);
attr(button, "class", "svelte-1hvi0n4");
},
// m --> mount 挂载
m(target, anchor) {
insert(target, button, anchor);
append(button, t0);
append(button, t1);
append(button, t2);
append(button, t3);
// 绑定事件
if (!mounted) {
dispose = listen(button, "click", /*click*/ ctx[1]);
mounted = true;
}
},
// p --> update 更新
p(ctx, [dirty]) {
if (dirty & /*clickCount*/ 1) set_data(t1, /*clickCount*/ ctx[0]);
if (dirty & /*clickCount*/ 1 && t3_value !== (t3_value = (/*clickCount*/ ctx[0] > 1 ? 'times' : 'time') + "")) set_data(t3, t3_value);
},
i: noop,
o: noop,
// d --> destroy 销毁
d(detaching) {
if (detaching) {
detach(button);
}
mounted = false;
dispose();
}
};
}
// 实例，对应上面的ctx传参数
function instance($$self, $$props, $$invalidate) {
let clickCount = 0;
function click() {
$$invalidate(0, clickCount += 1);
}
return [clickCount, click];
}
class App extends SvelteComponent {
constructor(options) {
super();
init(this, options, instance, create_fragment, safe_not_equal, {}, add_css);
}
}
export default App;
开始使用
官方推荐使用SvelteKit来创建Svelte应用项目，具体命令如下：
npm create svelte@latest svelte-demo
cd svelte-demo
npm install
npm run dev
Svelte会将.svelte组件文件编译成.js文件去创造真实的DOM和对应的.css样式文件，工具同时提供了开发服务器、路由、编译部署、SSR等支持。SvelteKit利用Vite去编译代码。
如果你不想使用SvelteKit，你还可以通过Vite来创建Svelte应用项目，具体命令如下：
# 选择svelte模板
npm init vite
# 生成HTML，JS，CSS文件到dist文件夹
npm run build
编辑器支持
Svelte团队维护了一个VsCode的插件Svelte for VS Code，支持语法提示、高亮、格式化等功能。
总结
Svelte是一个编译时的响应式前端组件框架，目标是减少React，Vue等框架引入虚拟DOM和Diff实现响应式的性能损耗。
Svelte的实现原理理论上比React和Vue等框架性能要好，但是考虑到虚拟DOM技术的成熟和优化，客户端的硬件和网络资源提升，这部分的性能提升带来的收益或许不明显。
当前要不要追求极致的性能而选择Svelte？我的答案是否定的。一是Svelte当前的成熟度和生态丰富度都没React和Vue好，开发体验和效率相对会没那么好；二是上面说了，Svelte带来的性能提升收益或许并不会那么明显。
那我们要不要关注和学习Svelte? 我的答案是肯定的。Svelte框架背后的实现原理、思路以及技术都是值得我们去了解和学习的。而且未来Svelte的生态丰富了，或许开发体验和效率会越来越好，我们也多一种选择。总之，保持热爱，保持好奇，保持学习吧～
参考
- 官方文档
- Svelte 3: Rethinking reactivity
- deep-dive-into-svelte
- Svelte vs. React: A Comprehensive Comparison
联系我
本文由mdnice多平台发布
