Acmion
commented
3 years ago Sorry for the late answer. I often find GitHub notifications hard to detect.
As per the Readme, the "Component Source" size is just the size of the "src/_components/" directory (relative to each project).
For example, the "Component Source" of "SvelteScaling/sample-apps/svelte-apps/svelte-app-16" is the size of "SvelteScaling/sample-apps/svelte-apps/svelte-app-16/src/_components/".
Comments on your example
Let's say you have a simple component in both react and svelte. Say 1 div that displays the output of a single variable. And in the javascript portion of the component there is 137KB worth of javascript code that is tied to the output of the single variable.
Not entirely sure what you are writing about here. But the 137 KB refers to the size of "Component Source" and it's inflection point when comparing React and Svelte.
When compiled, is the React component bundle going to be smaller or simillar? It seems no, since at least to my knowledge the virtual DOM has no bearing on javascript right?
More often than not, the React component will be smaller than the equivalent of Svelte. This is because React contains all updating logic within the base library, which then calculates a diff. Svelte operates such that "extra" code is inserted in each place where a variable is changed, which then wires everything up with the component. This "extra" code can add upp to more than the size of the React base library, if a lot of "extra" code is needed. This is somewhat simplified explanation.
Am I correct in my assumption that the 137KB of component source correlates directly or closely to the size of the DOM within the component? If that's true, is there an efficient way to track it?
I'd assume that component JavaScript is the greater factor. See the comment about "extra" code above. The component DOM would have to be stored in a relatively similar fashion in both React and Svelte and as such I don't think that this is the root cause.
I also posted this question to the other repo which did some analysis on this inflection point as well. But I'm just hoping to wrap my head around how to accurately think about the inflection point.
Excuse my ignorance, but when you say the inflection point is about 137KB of component source. Can you expound more on what component source means or how to track it?
For example:
Let's say you have a simple component in both react and svelte. Say 1 div that displays the output of a single variable. And in the javascript portion of the component there is 137KB worth of javascript code that is tied to the output of the single variable.
When compiled, is the React component bundle going to be smaller or simillar? It seems no, since at least to my knowledge the virtual DOM has no bearing on javascript right?
Am I correct in my assumption that the 137KB of component source correlates directly or closely to the size of the DOM within the component? If that's true, is there an efficient way to track it?