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.

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.

• javascript
• html
• svelte

Share Improve this question Follow asked Mar 26 at 18:58 AlexAlex 66.1k185185 gold badges459459 silver badges651651 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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.