为什么 Svelte 组件的增量成本高于 VDOM 框架？

Question

来自这个问题：https://github.com/sveltejs/svelte/issues/2546

为什么说“组件的增量成本肯定要大得多”？真的吗？

有人可以帮我打开包装吗？

Answer 1

对于 hackape 的回答，这是一张我希望能说明差异的图表。

在左边，我们有采用黑盒方法的传统框架。这些组件就像框架的指令集一样工作。因此，框架通常包含所有可用的功能，因为它不知道可以使用什么。 （警告，像 Vue-3 这样的一些框架现在允许创建一个只包含所需部分的包）。另一方面，Svelte 将编译组件，并将所需的部分注入到组件中。当添加到每个组件的所有功能超过框架的大小（react、vue 等）时，就会发生临界点。鉴于注入的 svelte 脚本的大小取决于组件的内容，仅根据组件的数量很难判断何时会出现此临界点。

Answer 2

需要明确的是，当 Rich 说“成本”时，他指的是已编译代码的包大小。在 Web 应用程序的上下文中，这显然是一种成本。为了便于说明，让我们比较一下 svelte 和 react。

React 需要“react”运行时库和“react-dom”渲染器库，也就是 VDOM 运行时，才能正常工作。因此，您需要为这些运行时库的大小支付前期费用。但是对于你添加到应用程序包中的每个组件，包大小方面的“增量成本”只是组件代码的大小，如果你不使用 JSX，几乎就是这样。即使你这样做了，从源代码到编译代码，代码大小的膨胀率也接近 1。

使用 svelte，您不需要 VDOM 运行时。因此，除了小巧的运行时库之外，几乎没有前期成本。但是对于您添加的每个组件，您的源代码.svelte 将被编译器编译（并且不可避免地膨胀）为.js 代码，并且膨胀率远大于 1。因此 Rich 说“一个组件的增量成本”明显更大”。

有人有done the math。根据@halfnelson，我们有这两个等式：

Svelte Bundle Bytes = 0.493 * Source_Size + 2811
React Bundle Bytes = 0.153 * Source_Size + 43503

他的计算是使用压缩代码完成的，因此两个乘数都小于 1。您可以看出，每个 svelte 组件的“增量成本”是反应成本的 3 倍。但是前期的运行时间成本是 react 的 1/15。