Why is Svelte Component incremental cost greater than VDOM frameworks?

Question

This is from this issue: https://github.com/sveltejs/svelte/issues/2546

Why is the statement "surely the incremental cost of a component is significantly larger?" true?

Can someone unpack that for me?

Answer 1

To be clear when Rich said “cost” he was referring to the bundle size of the compiled code. In web app’s context that’s obviously a cost. For illustration purpose, let’s compare svelte against react.

React needs both the 'react' runtime lib and the 'react-dom' renderer lib, aka the VDOM runtime, in order to work properly. So you pay the upfront cost for the size of these runtime libs. But for each component you add to you app’s bundle, the “incremental cost” in term of bundle size is just the size of component’s code, almost as is, if you don’t use JSX. Even if you do, the inflation rate of code size, from source code to compiled code, is close to 1.

With svelte, you don’t need a VDOM runtime. So there’s little upfront cost beside the tiny svelte runtime lib. But for each component you add, your source .svelte code will be compiled (and inevitably inflated) by the compiler into .js code, and the inflation rate is much greater than 1. Thus Rich said “ the incremental cost of a component is significantly larger”.

Some one has done the math. According to @halfnelson we have these two equations:

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

His calculation is done using minified code so both multiplier is less than 1. You can tell the “incremental cost” per component of svelte is 3x the cost of react. But the upfront runtime cost is 1/15 of react’s.

Answer 2

Further to hackape's answer, here's a chart that I hope will illustrate the difference.

On the left, we have traditional frameworks that have a black-box approach. The components work like an instruction set for the framework. As a result, the framework usually includes all the functionality available, since it doesn't know what may be used. (caveat, some frameworks like Vue-3 now allow creating a bundle that only includes the parts needed). On the other hand Svelte will compile the components, and inject the parts needed into the component. The tipping point happens when the all the functionality added to each component surpasses the size of the framework (react, vue, etc). Given that the size of the injected svelte script is based on the contents of the component, it is hard to tell, based on number of components alone, when this tipping point may occur.