Closed ecstrema closed 4 months ago
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.
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!
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:
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.@tweakpane/core
@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.@tweakpane/core
dependency saves about 110k in the minified plugin artifact.@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.
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:
Sum of Chunks | Sum of Chunks (gzip) | Largest Chunk | Largest Chunk (gzip) | |
---|---|---|---|---|
Before | 1599 K | 422 K | 1014 K | 215 K |
After | 819 K | 260 K | 233 K | 53 K |
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.
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
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!
On build, I get this:
Notice the warning at the end, and the size of the last chunk.
Since I'm not even using the waveform plugin, and most of my other chunks are under 8kB, I'm really wondering what's happening there. Why is tree shaking not working for the waveform plugin? I don't even know if the error is from tweakpane itself or your otherwise fantastic library here.
Do you know what could be causing that?