Prod build generates a lot of chunks


#1

When --prod building Ionic v4 it generates a lot of files (about ~170 files).

Is there a detailed explanation as of why I load that many files instead of just bundling them to one file for the needed components per view? What am I missing here?

Cheers!


#2

It’s a feature according @manucorporat :wink:

Reported there https://github.com/ionic-team/ionic/issues/16391

Duplicate on the forum here https://forum.ionicframework.com/t/ionic-4-core-using-with-vuejs-without-cdn-creates-100s-of-files


#3

thanks for your reply, david!
not really satisfied though with “This is actually a feature, not a bug.”

in my mind something sets off when I see 50 requests having to process; it feels weird. especially when on slower networks. is there some kind of bundling going on in newer http protocols?
I can see that there is pretty much to none “request waterfalls” going on.

update: asked for some more clarification in the github issue @reedrichards linked.


#4

I saw the kind of waterfalls too but I’m really not sure how it works and stuffs. For sure everything is lazy loaded but don’t know more, therefore I’m happy to follow the topic :wink:


#5

hey @reedrichards, I investigated a little and it turns out these mass of items in the request tab of the dev console are merely prefetches!
I’m using Ionic with vue and vue automatically puts every *.js file into the index.html as a prefetch, maybe Ionic does the same for angular, too.

the actual content of the ionic components is only loaded when you actually need the component. So yeah, if you have all possible ionic components on one page, you’ll have to download all components file by file. but I don’t think that’s usually the case or seems to be a problem, at least for my use cases.


#6

I think I could confirm that too, when I observe my project where I use only Ionic Core (not FW) I only see a couple of the 200 js file been loaded. Furthermore most of them seems to be actually loaded in parallel, so that’s really good

The “waterfall” is main -> js -> svg -> favicon but I guess that’s normal