Investigate package size (consider sideEffect)

[techniq]

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 sideEffect NPM 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)

• Rollup not tree-shaking from "d3" package d3/d3#3076
• Add sideEffects: false to package.json.  d3/d3#3131
• Add sideEffects: false flag to package.json to allow tree shaking mrdoob/three.js#16059

[techniq]

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/js directly
  • 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-ux templates as long as they use our vite config.

[techniq]

Also took a look at a few small projects I've built with Svelte UX, and attemped to ignore the data/API portion

Site	DevTools	Download	Resources
		434kB	687 kB
		188kB	526 kB
		97.2kB	287 kB

They all seemed reasonable.

[techniq]

Ran a couple quick lighthouse scores (for performance number), and they came back promising as well

[techniq]

Consider installing https://github.com/btd/rollup-plugin-visualizer (although based on PRs for Rollup v4, it doesn't look actively maintained at the moment).