【Svelte】当Svelte在项目在调试模式下的中的使用在js级别的差异和细化后的体积差异

js级别的差异

主要来自两个方面：hook系统（不考虑类）和ecma-ast差异hook系统。 钩子系统的api更多地用于纯函数组件注入状态和生命周期。在这两个方面，Svelte提供的解决方案是不同的。 由于预运行编译，Svelte编译器扫描所有与UI相关的状态并注入黑魔法，使得状态的使用与变量声明和赋值一样简单。 基本上，开发人员不需要太在意所谓的副作用；因此，一些钩子接口在Svelte框架上是冗余的。然而，考虑到大量的钩子接口，我们选择了内置的svelte钩子来简化转换过程中的转换逻辑。SVelte钩子是一组基于SVelte的钩子接口，通过对react钩子进行基准测试来实现，这些钩子在使用中基本相同。

<script>
	import Nested from './Nested.svelte';
</script>

<style> p {
		color: purple;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	} </style>

<p>These styles...</p>
<Nested/> 

ecma ast差异

ecma ast difference babel提供的解析是基于estree的，但同时一些类型也在此基础上进行了改进。有关具体差异，请参阅此处的babel解析器[1]。细化的数据类型有助于我们进行转换推断，因此我们没有使用babel来提供estree插件，并且在转换之后，ast再次被平滑。 CSS转换比上述两部分的转换简单得多。React样式是标准css，Svelte样式也是标准css。但是，它将增加一定的编译能力。可以理解，它是标准css的超集，可以直接使用。然而，为了平滑jsx和Svelte html在自定义组件的类选择器中的差异，我们仍然在编译阶段进行了一些转换，这里不再展开。

<script>
	let count = 0;

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

<button on:click={handleClick}>
	Clicked {count} {count ===