Svelte框架入门

发表于 更新于 分类于

关键词

前端框架、编译器、响应式、模板

介绍

Svelte /svelt/ adj. 苗条的；线条清晰的；和蔼的
Svelte是一个前端组件框架，就像它的英文名字一样，Svelte的目标是打造一个更高性能的响应性前端框架。
Svelte类似于React和Vue框架，提供模板语法和响应式编程。但是有一个重要的区别：Svelte是一个编译时的框架，在编译的过程中生成组件运行时的代码并实现响应式，而React和Vue则是基于虚拟DOM及Diff实现运行时的响应式。
这正是Svelte宣传的提高性能的核心实现。我们知道，原生的性能肯定是最高的，没有中间多余的转换和对比等框架层的逻辑消耗性能。或许有同学就会问，那我们在JQuery时代写的代码性能不是更好吗？为什么感觉上却没有比react和Vue写的应用性能好呢。我想，这主要是以下几个原因：

  1. 现在的硬件和网络带宽等资源已经比以往有了大幅度的提升，所以就算应用的体积较以往比较大，相比硬件等资源的提升，反而会感觉上性能更好；

  2. JQuery是基于原生的DOM API封装和扩展了统一的接口，屏蔽了浏览器底层的差异。但是很多开发人员在使用时并没有考虑DOM变更对性能带来的影响，只是简单的用JQuery对DOM进行粗暴的全局更新；

  3. Vue和React虽然是引入虚拟DOM，需要Diff等逻辑维护和更新实际的DOM树，但是框架本身做了优化，Diff算法和更新策略也有很大的提升，所以性能上并没有感觉比原生的差很多。

虽然Vue和React如今已经满足了前端大部分的场景，Svelte的目标是追求更好的性能 (所以前端是真的卷，总有人乐此不疲的遭轮子，但也正是这些人在推动着前端的不断发展) 。Svelte提供类似Vue单文件组件的模板语法，然后编译成原生JavaScript，提供了一套相对于我们自己操作DOM，更优雅，更高效的更新方案。我们可以基于Svelte官网提供的REPL直观的了解一下编译的过程：

组件文件源码，App.svelte实现了一个简单的点击按钮统计点击次数的功能。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 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编译之后的代码如下，可以具体查看我的注释进行了解： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
/* 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应用项目，具体命令如下： 

1
2
3
4
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应用项目，具体命令如下： 

1
2
3
4
# 选择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的生态丰富了，或许开发体验和效率会越来越好，我们也多一种选择。总之，保持热爱，保持好奇，保持学习吧～

参考

联系我