Plugin waveform integration shows large bundle size about svelte-tweakpane-ui HOT 6 CLOSED

Closing this since there should be significant improvement in bundle size after v1.2.6.

If that's not the case, feel free to comment and I'll re-open!

from svelte-tweakpane-ui.

Hi, thanks for trying out the library and for bringing up this concern.

You're right that tree shaking seems to miss a lot of unused branches. I dug into this a bit during development without finding a satisfactory fix, and the current workaround is to use default imports instead of named imports, targeting only the components you need, as described here: https://kitschpatrol.com/svelte-tweakpane-ui/docs#importing-components

Let me know if that gets your bundle size down, and I'm open to any insights into how I could structure the library to encourage the tree shaker to work more aggressively when using named imports instead of default imports.

from svelte-tweakpane-ui.

Effectively, using default imports reduced noticeably the last chunks. It's still far from perfect, and tree shaking really is something hard to debug, so it'll stay that way for now.

Thank you for checking!

from svelte-tweakpane-ui.

Glad that helped, but the build sizes still bug me so I looked into this a bit further, and picked up a few new insights:

• The bloat doesn't seem specific to tweakpane-plugin-waveform, for some reason code for multiple plugins is ending up in that chunk. If you remove tweakpane-plugin-waveform from the library entirely, then you still end up with a bloated chunk containing code for multiple plugins.
• There's a bunch of duplicated code in the built files, which looks like it's from @tweakpane/core
• The rollup configuration in Tweakpane plugin template, which is the project boilerplate most the third-party plugin use, does not seem to externalize @tweakpane/core as a production dependency. Instead, it gets bundled into the single-file plugin artifact, which is what's published to NPM and imported by plugin consumers. Since the duplicative @tweakpane/core code ends up embedded in the same file as the plugin-specific code, it cannot be deduplicated by vite.
• In a quick test in one of the third-party plugin projects, externalizing the @tweakpane/core dependency saves about 110k in the minified plugin artifact.
• There are seven third party plugins included with Svelte Tweakpane UI, so that's perhaps ~770k of duplicative @tweakpane/core code.

So, I think we're seeing the tradeoffs between distributing plugins as built artifacts instead of source, which is the Tweakpane project's chosen approach. This has some advantages for ease of distribution, but eliminates some opportunities for subsequent build optimization. (FWIW Svelte does the opposite, distributing libraries as .svelte source files.)

I don't know of a solution for this other than maintaining a fork of each plugin with @tweakpane/core externalized in its build configuration, which would be a bit of work, unless there's a way to get the bundler to deduplicate the output.

Regardless of possible optimizations in how the third-party plugins are built, it's worth noting that using default instead of named imports still matters for tree shaking / dead code elimination.

I will keep this issue open and plan to pursue the externalization strategy when time permits.

from svelte-tweakpane-ui.

I just updated all the plugin dependencies to externalize @tweakpane/core, and it seems to work well.

With my test project that includes every component from the library, I saw the following changes in a production build:

Pretty close to the 770 K savings estimate. The largest chunk is about a quarter of its previous size, and well under the default 500 K chunk size warning threshold.

Again when bundle size is critical, it's still worth using default instead of named imports in addition to this optimization, since tree shaking is a separate issue.

Released in v1.2.6.

from svelte-tweakpane-ui.

And (much) longer term, it looks like Svelte 5 might bring further relief:

Files & size

The project has a total of 232 files, whereby there are 147 Svelte components in real terms (not including tests and demos). The migration from v4 to v5 has reduced the size of files from 135kb to 126kb. The demo build file (JS) was with v4: 382kb - and with v5: 171kb (55% smaller)! But I think this will only be small if you use the new Runes mode.

I used the new strict runes mode and had to change 207 files (90%), which took 1 week. I didn't have to change a single line of CSS code.

Via a Reddit thread regarding a different project

from svelte-tweakpane-ui.