阅读 2008

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 组件,在移除样式相关的代码后,绘制出了源码体积和打包后大小的关系图。

Svelte%20%E6%A1%86%E6%9E%B6%E4%BD%93%E7%A7%AF%E4%BC%98%E5%8A%BF%E6%9C%89%E5%A4%9A%E5%A4%A7%EF%BC%9F%205c1bb11b96db4c729ebb0bb59264dea3/Source_size_vs_Bundle_size_-_Svelte.svg

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

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

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

Svelte%20%E6%A1%86%E6%9E%B6%E4%BD%93%E7%A7%AF%E4%BC%98%E5%8A%BF%E6%9C%89%E5%A4%9A%E5%A4%A7%EF%BC%9F%205c1bb11b96db4c729ebb0bb59264dea3/Untitled.png

得出公式为:

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

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

Svelte%20%E6%A1%86%E6%9E%B6%E4%BD%93%E7%A7%AF%E4%BC%98%E5%8A%BF%E6%9C%89%E5%A4%9A%E5%A4%A7%EF%BC%9F%205c1bb11b96db4c729ebb0bb59264dea3/Untitled%201.png

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

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

Svelte%20%E6%A1%86%E6%9E%B6%E4%BD%93%E7%A7%AF%E4%BC%98%E5%8A%BF%E6%9C%89%E5%A4%9A%E5%A4%A7%EF%BC%9F%205c1bb11b96db4c729ebb0bb59264dea3/Untitled%202.png

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

文章分类
前端
文章标签