Comment by slopinthebag
8 days ago
To be fair though, even with Svelte et al bundle sizes can balloon quickly when using UI toolkits and other libraries.
8 days ago
To be fair though, even with Svelte et al bundle sizes can balloon quickly when using UI toolkits and other libraries.
Yes but this is again nothing to do with svelte.
This is just how Node works, it's not a compiled language and you are not tree shaking all the components from libraries so this is bound to occur.
You can solve this by making your own libraries or just copying the individual source code for specific components into your project instead of including the whole package.
With sveltekit(and maybe nextjs aswell) you are only serving the necessary files to the client instead of including full library source code.
Wouldn't tree-shaking take care of this? i.e. If I only use 'Button' (from the UI library), nothing else should be included in the (production) bundle.
Not in practice, because these UI libraries usually have many intertwined interdependencies. <Button /> probably still imports all of the context providers, which also import their own dependencies, etc. So you end up including half of the library if not more just for a button, but if you use multiple components from the library the cost is amortised.
And typically if you're just using a single component it's one that is more complex than a button, like a popover or colour picker. Which then pulls in other components, etc.