reduce size (adds 110kb to bundle)

[mustafa0x]

First, thanks for svelte-sonner. It's quite a nice toast component.

Second, I replaced my hand rolled toast component with sonner, and saw bundle.es.js grow by 110kb (50kb after minifying). I didn't expect such an increase!

I diffed the bundles to see if there was a single culprit. However it was mostly the generated svelte code for the sonner component. So there doesn't seem to be any simple fix to this problem.

I copied the added code to a gist (4k lines!), for whomever is curious to see what was added.

[o-az]

I noticed this too and ended up replacing with svelte-french-toast

[mustafa0x]

It's quite confusing to me. There's no clear culprit, other than the generated code being huge. There are a few things that would help (eg extracting out the svg, or making it a raw string), but no clear low hanging fruit.

I think Svelte 5 will reduce the bundle size a fair bit.

[o-az]

replacing svgs with <img src="path/to/svg-file.svg" /> would definitely reduce bundle size

[mustafa0x]

My app

$> du -hs dist/{bundle.es.js,bundle-final.js}
216K  dist/bundle.es.js
96K   dist/bundle-final.js

After adding svelte-french-toast.

$> du -hs dist/{bundle.es.js,bundle-final.js}
280K  dist/bundle.es.js
116K  dist/bundle-final.js

So it adds 64k, and 20k minified. A lot more reasonable.

[mustafa0x]

I think Svelte 5 will reduce the bundle size a fair bit.

250.80 kB with, 191.62 kB without (minified: 102.6 kB / 79 kB). So around 50% less than svelte 4.

Which is a lot better. 24kb minified is still a bit on the larger side though.

[huntabyte]

What are you using as your bundler? @mustafa0x

I'm not seeing that massive increase in size, but I'd like to investigate if you can give me a reproduction repo. It'd help a ton! Thanks!

Looking at your output it appears a ton of lines come from the conditionals in the slot props. I'm curious what you're able to produce as a bundle output side on this branch (which is rewritten in Svelte 5): https://github.com/huntabyte/svelte-sonner/tree/svelte-5

[mustafa0x]

i'm using vite (ie rollup). repro: https://github.com/mustafa0x/sonner-size

plain sv5 app

$> pnpm vite build
vite v5.3.4 building for production...
✓ 77 modules transformed.
dist/bundle.es.js  22.83 kB │ gzip: 5.40 kB
✓ built in 121ms

after adding sonner

$> pnpm vite build
vite v5.3.4 building for production...
✓ 86 modules transformed.
dist/style.css      16.49 kB │ gzip:  3.32 kB
dist/bundle.es.js  112.81 kB │ gzip: 24.61 kB
✓ built in 246ms

with minifcation:

# no sonner
dist/bundle.es.js  11.91 kB │ gzip: 4.11 kB

# sonner
dist/bundle.es.js  66.83 kB │ gzip: 19.28 kB

+55kb minified!

not sure why more than the +24kb i got above. maybe because it was a larger app, so the svelte utils/anims/transitions were added to the bundle in all cases. also i was using terser above, which minifies a little better than esbuild (which vite uses).

[mustafa0x]

I'm curious what you're able to produce as a bundle output side on this branch (which is rewritten in Svelte 5): https://github.com/huntabyte/svelte-sonner/tree/svelte-5

pkg.json: "svelte-sonner": "github:huntabyte/svelte-sonner#svelte-5",

pnpm vite build:

x Build failed in 27ms
error during build:
[commonjs--resolver] Failed to resolve entry for package "svelte-sonner". The package may have incorrect main/module/exports specified in its package.json.