Svelte bundle size

[jamesopstad]

I've just been trying out Create Snowpack App and used the @snowpack/app-template-svelte template. I ran npm run build on a Hello World app (literally <h1>Hello world!</h1> in App.svelte) and the javascript bundle was 31.13 KB. This should be much smaller (probably between 2 and 3 KB). I notice that svelte/internal.js is inside the web_modules folder and my guess is that this is being bundled in its entirety.

[FredKSchott]

Interesting, thanks for filing! I'm surprised Parcel isn't tree-shaking this properly, we'll need to dig in to see what's happening & how to fix.

[ervwalter]

Parcel v1 doesn't do tree-shaking by default. You have to pass --experimental-scope-hoisting on the parcel command line.

Note, I have personally found it to be not 100% reliable (perhaps that is why it is labeled experimental). For example, I had another project using grommet and parcel's tree shaking crashed. I don't know if it was a problem with grommet's es6 modules code or with parcel, and my project was small enough that I didn't bother figuring it out and just turned tree-shaking off.

I don't know if Parcel v2 is better.

[FredKSchott]

relevant thread: FredKSchott/snowpack#303

[pngwn]

Can I ask why you chose to use Parcel for production bundling when you are already using rollup internally? I've found parcel problematic in the past and issues like this hint at some of the issues. I'm sure they will get fixed eventually but rollup is much further along this path.

In my case, this will probably mean I need to maintain separate configs for dev and prod as Parcel does not fulfil my requirements.

[FredKSchott]

The short answer is that Rollup/Webpack are JavaScript bundlers, and Parcel is a full application bundler. Parcel is the only bundler we've found that tackles the entire application, using your HTML file as the starting point just like your browser does. We couldn't offer zero-config bundles without it.

[pngwn]

I could understand that if the output were suitable for production.

My experience has been that ‘no config’ has never applied even to simple side projects, that coupled with the unsuitable output just makes the bundle option fun for certain projects but far from ‘optimised’.

Many projects with more complex requirements or strict performance demands will get little out of the bundle option, which is a shame.

[FredKSchott]

I think the Parcel 2 output will be a good benchmark to have this convo with real data, vs. personal opinions/experiences.

But to be clear, Snowpack isn't zero config. It's just that we handle all of the building so that by the time it gets to Parcel, there's nothing left to configure other than the bundling strategy itself (how to code-split and when). I could definitely see that config being supported

[jamesopstad]

I'm happy for this to be closed as it's more of a Parcel issue and that's no longer included by default.

[FredKSchott]

sgtm, we've also implemented splitting of the JS & CSS output that comes from a Svelte file, which should help reduce JS bundle size as well.