SvelteScaling - Does Svelte Scale?

"Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes."

This new way of building user interfaces has several benefits. The bundle size of Svelte is generally smaller than its competitors. Additionally, Svelte often outperforms in both general performance and memory usage, amongst other categories. See benchmarks at js-framework-benchmark. This combined with the fact that Svelte's syntax is significantly cleaner than, for example, React's, makes one wonder whether Svelte is the one framework to rule them all?

Svelte's approach has, however, a potential problem. Ditching the virtual DOM means that the incremental cost of each Svelte component is higher than it would be when using a virtual DOM. In practice, this means that there might be an inflection point, where the payload of other frameworks might actually be less than that of Svelte. Other performance categories are unlikely to be affected by the payload size. This has been brought up many times, see for example this GitHub issue. SvelteScaling aims to determine whether an inflection point exists and more generally, answer the question: Does Svelte scale?

Conclusions

This analysis concludes that the inflection point between Svelte and React lies at approximately 137 KB of component source code, after which the initial download of a gzipped Svelte application will be higher than that of a gzipped React application. For uncompressed applications, the inflection point is a about 178 KB. Will it Scale? - Finding Svelte's Inflection Point a similar study as SvelteScaling, approximated the gzipped inflection point to 120 KB, which is quite close to 137 KB. This fact reinforces the validity of this analysis.

Is 137 KB a lot or not? This is a list of some of the largest open source projects and their component source size that I was able to find:

Note that the reported component source size does not necessarily reflect the optimized application, since all components may not be used (all components were used and instantiated in the analysis section). However, 137 KB seems to be enough in most cases. While 137 KB of component source code is certainly reachable for a SPA, the amount of components that a single view in an app references will unlikely reach this limit. Thus, with code splitting techniques the initial download size will remain small and the app will load fast.

Regardless of whether the initial payload of a Svelte application might be higher after a certain point, I've still enjoyed Svelte a lot more than alternative frameworks. The syntax alone makes development with Svelte a delight, especially now that TypeScript support has been implemented. All of this combined with the benefits in runtime performance, makes Svelte an exceptional choice for frontend user interface development.

If React scales, then so does Svelte.

Methodology

The steps that are taken by SvelteScaling to determine whether Svelte scales:

  1. Create a framework specific project.
  2. Import N components used in real world projects.
  3. Reference and instantiate all imported components.
  4. Build an optimized bundle of an application.
  5. Measure the size of the source components and the size of the output bundle (and their gzipped variants).
  6. Repeat this process for many different values of N and procure data.
  7. Determine the relationship between source component and output bundle sizes and report and compare them with other frameworks.
  8. Repeat the above steps for different frameworks.
  9. Answer the question: Does Svelte scale?

The entire analysis can be reproduced by running a few JavaScript scripts with NodeJS. See more details in the GitHub repo.

Analysis

This section analyses how the component source size affects the bundle size of various frameworks.

Combined

Component Source Size VS Bundle Size
Svelte & React Inflection Point

Uncompressed: Approximately 178 KB of component source code.
Gzipped: Approximately 137 KB of component source code.

When the component source code is higher than the values above, then the initial download of a Svelte app will be higher than that of a React app.

Svelte

Component Source Size VS Bundle Size
Total Bundle Size Linear Regression Coefficients

Slope: xx
Intercept: xx

Gzipped Total Bundle Size Linear Regression Coefficients

Slope: xx
Intercept: xx

React

Component Source Size VS Bundle Size
Total Bundle Size Linear Regression Coefficients

Slope: xx
Intercept: xx

Gzipped Total Bundle Size Linear Regression Coefficients

Slope: xx
Intercept: xx

Reproduction

To reproduce the analysis in this document, see the instructions in the GitHub repository.

Credits

SvelteScaling was produced by Acmion (GitHub).

SvelteScaling was largely inspired by halfnelson/svelte-it-will-scale.

Contributing

Want to contribute? Head over to SvelteScaling's GitHub repository.

Things that could be done:

  • Include real world projects, rather than just collection of components, in this analysis.
  • Include similar analysis of other frameworks, for example, Vue.