谈谈新的前端框架 Svelte 和现代前端框架的特点

官方网址
https://svelte.dev/

这个框架还是非常不错的，轻量级，代码量少，没有Virtual DOM高性能，涵盖了非常多的优点。

先来说说轻量级，通过CSS缩小后有约17kb的大小，gzip后更是小到了4kb，可以说是比3大前端框架都小。
代码量少，Svelte直接免去了类和对象的编写，使用Svelte写代码省去30%-40%的代码量。

Svelte 的代码长什么样子呢？

<script>
	let count = 0;
	$: doubled = count * 2;

	function handleClick() {
   
		count += 1;
	}
</script>

<button on:click={
   handleClick}>
	Clicked {
   count} {
   count === 1 ? 'time' : 'times'}
</button>

有过前端开发经验的朋友第一眼看到这段代码肯定会问，这个 $: 是什么玩意？

其实这个就是相当于Vue中的computed的意思，React的useMemo() 的意思。是不是看上去很简洁？

Svelte的编译器会把这一段代码编译成以下代码，然后再通过webpack编译打包。
细心对比编译前后的代码，我们可以看出Svelte设计的巧妙之处。

1. import 语句，类声明和export语句是Svelte编译器之后加上的，节约了你去写这些代码的时间。同时因为没有类或对象的编写过程，节约了写this关键字。
2. 编译好的create_fragment方法是用来生成DOM目录树的，它是直接将源代码的html模板编译成了代码去实现响应式变化，最终这个新生成的节点会直接使用到真DOM上，这就是它宣传的没有Virtual DOM和它高性能的原因（因为有了Virtual DOM，还要做Diff之类的算法去做比对）。
3. Svelte框架在webpack打包前就编译好了纯原生JS库就可以执行代码，它的运行库不用再对类似于计算属性的内容再做额外的库和运算，所以它编译出来的包很小，执行效率也更高。也正因如此，Svelte的打包不再区分dev和prod模式，保证了生产环境和最终产品包的一致性。

/* App.svelte generated by Svelte v3.22.2 */
import {
   
	SvelteComponent,
	append,
	detach,
	element,
	init,
	insert,
	listen,
	noop,
	safe_not_equal,
	set_data,
	space,
	text
} from "svelte/internal";

function create_fragment(ctx) {
   
	let button;
	let t0;
	let t1;
	let t2;
	let t3_value =