Will it Scale? - Finding Svelte's Inflection Point

from #2546

Theoretically, yes there is an inflection point. Where that inflection point is is the only thing that really matters. In practice, you're unlikely to hit that inflection point on any given page of your app, as long as you're using code-splitting (which Sapper gives you OOTB)

We can work out this inflection point given sufficient data.

TLDR: Inflection is at 120 KB of component source (for react 16)

Finding the Svelte Bundle Size Formula

To find the inflection point, we need to determine the relationship between a projects svelte component source, and its generated bundle size.

We use the components from:

• Svelte Website
• Svelte Realworld
• Svelte HN

After removing the style tags, and bundling and minification we get a graph:

The yellow line is our final zipped and minified bundle, each data point is a bundle built with rollup by the scripts in this repository.

We can see the relationship is mostly linear, and a linear regression gives

Svelte Bundle Bytes = 0.493 * Source_Size + 2811

Finding the React Bundle Size Formula

We will compare our Svelte bundle size formula with reacts.

We will use the react components from:

• React Native Website
• React Redux Realworld
• Builder Book

After ensuring that we only include react components and not util/library code, we end up with the following graph:

The lines certainly look flatter than Svelte's, so we have a good chance of finding an inflection point. Linear regression on our data determines the relationship between React component source code and gzipped minified bundle size to be:

React Bundle Bytes = 0.153 * Source_Size + 43503

Calculating the Inflection Point

With our two bundle size formulas, we are able to find an inflection point using basic algebra.... but that isn't as pretty as graphs:

Examining the graph shows the inflection point is about 120KB of component source.

What does it mean?

It would seem that at about 120KB, the size advantage of going with a compiler over a runtime has vanished.

Should this be a concern?

from #2546

In practice, you're unlikely to hit that inflection point on any given page of your app, as long as you're using code-splitting (which Sapper gives you OOTB)

We should be able to check this assertion by looking at the amount of svelte code in each of the projects we used:

It turns out that svelte projects tend to be lean already. None of the projects we used came close to the inflection point, even all three projects combined falls short (we get just over half way there).

If these projects didn't come close, the odds are most projects won't. Indeed, even the figures above ignore code splitting, which would reduce the first payload significantly.

Summary

It is good to have an answer to "Will it Scale", and we can be assured that yes "It Will Scale"