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

这是从这个问题：

为什么“一个组件的增量成本肯定要大得多”的说法是正确的

---

有人能帮我解包吗？

当Rich说“成本”时，他指的是编译代码的捆绑大小。在web应用程序的上下文中，这显然是一种成本。为了便于说明，让我们将苗条与反应进行比较

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

使用svelte，您不需要VDOM运行时。因此，除了小巧的运行库之外，前期成本很低。但是对于您添加的每个组件，您的源代码

.svelte

代码将被编译器编译（并且不可避免地膨胀）为

.js

代码，膨胀率远远大于1。因此，里奇说，“组件的增量成本要大得多”

有人有。根据@halfnelson，我们有两个方程：

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

---

他的计算是使用缩小的代码完成的，所以两个乘数都小于1。您可以看出，苗条每种成分的“增量成本”是react成本的3倍。但是前期的运行成本是react的1/15。

根据hackape的回答，这里有一个图表，我希望能说明两者的区别

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

---

这张图表做到了——谢谢。一张图片抵得上千言万语