techniq
commented
11 months ago Spent a little bit of time trying to look into the install and bundle size of Svelte UX and it's dependencies (with bundle being the most important).
Using pkg-size.dev provides some useful insights:
Shows the total install size as 149MB, with 109MB attributable to sveld, although the top graph shows the top dependency as typescript at 67MB.
Using bundlephobia.com show the bundle as 2.5kB minified, and the biggest contributor is self, followed by date-fns and lodash-es (which seems more reasonable for bundle size).
Using packagephobia.com, it doesn't provide much insight other than bundle size of 618kb and install size of 143MB
When I tried to use bundlejs.com, it didn't provide much useful information, but probably because I don't fully understand how to use it, especially with Svelte.
Using npm.anvaka.com it helps to show the dependency tree as a graph, with most of the dependencies comes as the result of @changesets/cli (everything not in the green outline).
While there isn't strong evidence from the above, I think the following could be helpful..
- Remove lodash
- Consider using unplugin-icons instead of using
@mdi/jsdirectly- Can we still access the raw path (not just the
<svg>...</svg>(although that will still work with<Icon>)? - Will this break any change of running the components in the REPL (i.e. without Vite)? Assuming this will still work with SvelteLab, StackBlitz, CodeSandbox, etc with our
create-svelte-uxtemplates as long as they use our vite config.
- Can we still access the raw path (not just the
It would be useful to make sure our bundle size is as small as possible, and we are leveraging tree shaking as well.
It would be great to track our bundle size over time (with actual usage, not just full NPM size).
We might want to investigate the
sideEffectNPM config. I remember this being looked at for d3 and three.js years ago. Also wasn't sure if it's only useful for webpack (and still applicable for rollup/vite)