Build size differences when moving from CRA

[zxol]

I was very impressed with parcel's high speed builds and ease of config, so I tried to copy an existing project of mine from CRA to CRAP.

I spent some time fixing some issues with Babel, but basically all i needed to do was copy my src and public folders to a fresh CRAP app, which was very impressive.

However, I was confused to find that the build size of my prod js file has gone from 1.7mb to 4.3mb. Am I misunderstanding how parcel works? Is that file size jump expected?

[swyxio]

thanks for trying this out!

i mean that's clearly something wrong. and its probably not parcel's fault. i dont know what causing it - are you able to see if theres any obvious repetitive stuff in your generated bundle?

one way to see for sure if its parcel's fault is to either eject or set up a fresh parcel project from scratch (without CRAP). that will take a bit of time of course but there's probably a very dumb thing we're missing here.

i'm curious what babel issues you had? anything i should be fixing in the default template or jsut something specific for your project?

[zxol]

Thanks. I just realized i probably should have done an analysis of the file before opening this issue. But it's good to know you think it's probably my fault somehow. I'll let you know how it goes.

[zxol]

Regarding babel, for some reason it didn't know what to do with class properties or spread operators, so I had to add them into the babelrc. Along with a few other project specific plugins that aren't included in CRA or CRAP.

[zxol]

Upon comparing the two bundles, each parcel module seems to be about twice the size as it's webpack version.

For example, my firebase imported module in parcel, is coming out at 901 KB. In webpack it's 413 KB.
Seems to be the same across the board, including my own code.

There's also a large unmapped section that weighs a hefty 600+ KB

edit: So it's not being minified! Even then, when I minify the code, it's still 2.6MB, a good 800KB larger than the webpack bundle.

[swyxio]

hmmmthats weird!! i enable minification here.

went hunting in the parcel repo for answers. this might be related: parcel-bundler/parcel#1353 in which case i may just have to upgrade the parcel dependency

[zxol]

Thanks for the help and the cool project, @sw-yx.

I was curious, so I made the same project using the latest parcel only (no CRAP extra goodies), and the minification worked without any config, but I am still seeing about a 30% increase in size for the production build. I want to investigate further but I don't have the time to at the moment.

[swyxio]

gotcha and i appreciate all the feedback. im planning to get more involved in the parcel project when they start the public v2 RFC process and i will be sure to drill down on this going forward. sorry it didnt work out from the start, i feel like this is very early days yet for parcel.

[swyxio]

gonna keep this open for parcel v2 work 👍

[mjsarfatti]

Another probable cause of the bigger size is that parcel doesn't have tree shaking yet (except for an experimental feature hidden behind a flag, which doesn't work with react - see parcel-bundler/parcel#1699).

For example when I $ yarn build and then visit the site, the console alerts me that:

Uncaught Error: React is running in production mode, but dead code elimination has not been applied. Read how to correctly configure React for production: https://fb.me/react-perf-use-the-production-build

[swyxio]

yeah. oh well. i think we are all just early adopters of parcel. parcel will get there eventually.

[zxol]

Yeah, I think once parcel's build sizes are within 10-20% of weback it's going to be a no brainer to switch. A much better DX means more productivity, so you can accept a small loss in UX for that. Interested to see CRA with webpack 4.

[devongovett]

They should already be the same or smaller than webpack with --experimental-scope-hoisting enabled. If they aren't, then that's a bug or something weird is going on.

1. Do you have --experimental-tree-shaking enabled?
2. If not, why not? Was there a bug with it? If so, can your report it?
3. If it is still bigger, can you determine what files are larger and report a bug? You can run with the --detailed-report flag to see a list of the largest assets in your bundles.

[zxol]

Okay, I'll try those options out and report my findings.

[zxol]

This is great, it worked. Parcel's prod bundle is now 1.65MB, smaller than webpack.
Thanks @devongovett

[swyxio]

i see! so i need an API flag to programmatically enable --experimental-tree-shaking then in order to close this issue. cc @DeMoorJasper

[mjsarfatti]

@zxol does the generated app work though? When I tried it some days ago (10?) the build completed fine, but when I tested the app I got a bunch of React errors (which I didn't anymore when I switched the flag back off).

[DeMoorJasper]

@sw-yx you need my help with something? (I'm not sure why you cc'd me)

This is definitely intresting but expected behaviour, Parcels scope hoisting is better than webpacks. But it's experimental so probably best to check for any unwanted side-effects before putting anything in production with it enabled.

[swyxio]

ah, i only cc'ed you regarding potential inclusion in v2 - hopefully there will a flag for this in the programmatic API so I can use it 🤗

[DeMoorJasper]

There is @sw-yx it's called scopeHoist.

It's already in v1 so it'll def end up in v2

[zxol]

@mjsarfatti Yeah I did run into an error with react, thanks for the heads up there. React was undefined, so I switched from an import statement to a require statement and it seemed to solve the issue. Is that the same error you encountered? Also my babel lodash plugin stopped working so I had to refactor everything to lodash-es. I have confidence the parcel team are working on this stuff now.

[mjsarfatti]

Oh yeah same problem for me, good to know that switching to require worked!
I also have the impression they are really working on it now, so I think I'll wait for v2 since I have the time.

[swyxio]

oh i must have missed that. thank you, will fix!

this is so awesome 🤗

[swyxio]

closing and seeking maintainer! #34