I was noticing huge bundle sizes for my app until I used --experimental-scope-hoisting about parcel-plugin-svelte HOT 6 CLOSED

It should probably be here: https://parceljs.org/production.html#optimisations but it's experimental so we didn't really wanna push people to using it yet. We'll definitely push people to use it in Parcel 2, as it will be opt out.

The docs for that will be out soonish

from parcel-plugin-svelte.

I'm working in https://github.com/silinternational/wecarry-ui/tree/move-to-parcel if anyone is interested in the build config.

from parcel-plugin-svelte.

Scope Hoisting should fix this slightly but 3x smaller bundles seems a bit extreme. Maybe something's done wrong in this plugin, Svelte or in your codebase that relies too heavily on scope hoisting.

If scope-hoisting fixes it that's the way to do it, as that;s the default in rollup

from parcel-plugin-svelte.

For reference

with --experimental-scope-hoisting:

npm run build

> parcel build src/index.html -d public --experimental-scope-hoisting

✨  Built in 18.51s.

public/main.aefbfc94.js       353.88 KB    17.50s
public/main.645e4805.css      159.84 KB    16.19s
public/index.html                 517 B     6.20s
public/global.6f8fb1a8.css        483 B     6.77s

without --experimental-scope-hoisting:

npm run build

> parcel build src/index.html -d public

✨  Built in 15.51s.

public/main.eeb87dd0.js.map       ⚠️  2.96 MB     207ms
public/main.eeb87dd0.js           ⚠️  1.26 MB    14.29s
public/main.cbb1d593.css.map       265.14 KB      33ms
public/main.cbb1d593.css           159.88 KB    12.66s
public/global.49fcf85e.css.map       1.11 KB       5ms
public/global.49fcf85e.css             532 B     1.71s
public/index.html                      517 B     956ms

I'm not sure where the culprit is but if there's something obvious you see in our project that's not being done correctly, I'd appreciate the feedback, thank you!

from parcel-plugin-svelte.

@wcjr I guess svelte relies on scop-hoisting pretty heavily, can't seem to think of any other reason based on your code. Scope-hoisting is just another form of minification that's why it's smaller it's just a surprisingly big difference but as long as the code works it should be fine. Svelte is probably also built to utilise scope-hoisting to it's full extend. (as rollup which kind of invented scope-hoisting and svelte are built by the same person)

Scope Hoisting is currently experimental so be careful when using it, but it will become stable in Parcel 2, so it should be safe to use at that point.

Rollup has treeshaking (scope-hoisting) enabled by default, it was also the big shiny thing that differentiated Rollup from everything else at the beginning if I'm not mistaken.

Hopefully this helps you out with your concern about bundle size. There's nothing else I can really do here

from parcel-plugin-svelte.

Thanks, yeah Rich would know best how to utilize the two together for sure! I'm thinking some mention of this possible issue with bundles sizes might be valuable in the docs...it would've helped me, I feel like I got sort of lucky to stumble across the flag. If scope-hoisting is going to be on by default in Parcel 2, it could be useful to note that in the docs as well, e.g., if you notice larger bundle sizes than your rollup config, consider this flag or Parcel 2...idk :-), something like that under the Configuration section of the README I suppose.

from parcel-plugin-svelte.