Svelte 框架体积优势有多大？

Svelte 是一个新的前端框架，由 rollup 的作者编写。其口号——编译器即框架，核心思想在在于 编译期 做静态分析， 按需生成 最小的功能集来减少打包后代码体积。Svelte 的另一个特点是没有采用现在框架流行的虚拟 DOM 架构，而是直接编译生成最小操作 DOM 的代码，从而避免掉 diff 操作。

所以从上述这段话可以看出，Svelte 的关键优势在两点：

• 打包后体积小
• 理论上性能和手写原生 JS 一样

除去性能方面， Svelte 的另一个卖点就是，完成相同需求的代码，Svelte 打包后的体积会比其他框架小。我们从原理上来理解下为什么 Svelte 打包后的体积会小于其他框架。

对于这段代码

<script>
	let name = 'world';
</script>

<h1>Hello {name}!</h1>

会被编译成

function create_fragment(ctx) {
	let h1;

	return {
		c() {
			h1 = element("h1");
			h1.textContent = `Hello ${name}!`;
		},
		m(target, anchor) {
			insert(target, h1, anchor);
		},
		p: noop,
		i: noop,
		o: noop,
		d(detaching) {
			if (detaching) detach(h1);
		}
	};
}

这段代码就是一个简单的挂载逻辑，通过模版编译分析，可以得出最终生成的 <h1>Hello {name}!</h1> 永远不会改变，那么 Svelte 就不会引入响应式更新相关的代码，没有用到生命周期钩子，自然而然生命周期相关的代码也没有，这个组件编译后的代码就是这么多。

相同的代码如果换成 React 的话，即使你没有用到 hooks 或 class 相关的功能，你依然需要引入整个 react 包，而所谓体积差距就是在这个时候拉开的。

了解到 Svelte 的原理之后，我们就可以从理论上做点分析了，从原理来看，这只是高级点的按需引入而已，你不用为你没有用到的代码付出代价，听起来很不错，然而换句话说，如果你确实用到了所有功能，你依然逃不掉代价。

重点在于，什么时候这个体积优势会消失，临界点在哪里？ Svelte 社区同样有人关注这个问题 #2546 ，于是就有人做了相关实验放在 svelte-it-will-scale 仓库中。

为了找出影响体积优势的临界点，首先需要找出 Svelte 源代码与打包后代码的体积关系。测试者选取了真实世界中的一些 Svelte 项目中，不同大小的 Svelte 组件，在移除样式相关的代码后，绘制出了源码体积和打包后大小的关系图。

x 轴是源码体积大小，y 轴是打包后体积大小，不同线表示应用不同压缩算法后的结果。通过这个关系图，我们可以得出一个公式：

Svelte 组件打包后字节 = 0.493 * 源码大小 + 2811

接下来，实验者使用同样的方法测算了 React 框架，得到的关系图如下

得出公式为：

React 组件打包后字节 = 0.153 * 源码大小 + 43503

通过两个公式，我们可以很容易使用三年级的数学水平算出临界点在哪里，不过为了直观，我们还是用图来表示

从图中可以看到，临界点在 120 kb 作用，也就是说，如果你的应用 组件相关的代码在 120 kb 左右时， Svelte 按需编译的体积优势则不在了

从实践中来看，正常应用组件相关的代码确实很难达到 120 kb 作用，再加上使用 code-spliting 等技术。并且，实验者同时观察了现实世界中的 Svelte 项目，发现确实没有任何一个项目甚至接近临界点。

因此，使用 Svelte 确实会为你的项目带来体积上的优势。