Svelte multiple small components vs regular html elements

Question

Does it affect performance having svelte components instead of regular HTML elements, for small things like buttons, links etc?

Wrapping these elements in a svelte component would make it more convenient in code, but if it adds a lot of overhead then it may not be worth it.

Answer 1

There are two things that cause some overhead here:

• The general Svelte runtime (managing reactivity, effects, rendering)
• The generated component code

If you are using client-side functionality of Svelte at all, the runtime has to be loaded. The relative cost of this goes down with the number of component definitions since the runtime is shared.

The overhead for the component code also amortizes with the number of component instances, since they all share the same definition. So if you only have one or very few instances, it might make a noticeable difference in the bundle sizes but for any sufficiently complex application, I would not worry about this.

The code of simple wrapper components will share similarities which also helps if the code is transferred gzipped.