(chore) vendor bundle.js seems way too large

[axtho]

this is even after AOT compilation (then still about 3.5mb!!). Also one of the chunks.js files is also just a touch under 1mb. When you read on these issues, e.g. here the file sizes talked about there are in another universe altogether.

We should investigate why our bundles are that much larger. All just because of Material?

[karsunke]

Be careful, when loading momentjs! Because of the webpack configuration all language packs where loaded and it doubled the vendor size in my application.

[axtho]

@karsunke thanks for the heads-up! I had suspected lodash to be the culprit, so I removed it (was using only one function anyway). It did decrease the chunks by quite a bit.
What did you do? Remove moment?

[karsunke]

I removed it in my case, because it was loaded by my environment anyway.

There is a whole thread for loading momentjs in webpack here:
moment/moment#1435

Anyway the vendorjs is still very big in my case.

[axtho]

@karsunke thanks. I will have a look at that. The vendor is already 2.5mb just from Angular. I guess angular/material2 is also rather larger, plus ngrx and number of others ... one quickly gets to 4mb. Crazy world :)

But, the AOT compilation really saves the day (although by not so much as with others ... hence this ticket)

[asaph26]

@axtho : I kinda have the same setup but in addition I have covalent as well. After the v4 update it is only 1.46Mb (generated file) for the vendor.chunk.js.

It also looks like the file size reported after AOT compilation is not the generated size

[axtho]

@asaph26 which project are you working on? Maybe I can have a look :D ... I will revisit this when the move to core has been completed and some things can be removed from the web project. I keep on reading about guys getting reductions with the AOT down to 300kb ... that would be sweet!

[asaph26]

@axtho I can add you to the repo

[asaph26]

One way to figure out what is taking too much space is to use the source map explorer

npm i -g source-map-explorer
ng build --prod --sm This generates the prod build with source map
source-map-explorer dist/vendor*.js

[axtho]

@asaph26 thanks man. Good tip! Did you get any pointers on how to read the result? I understand most, but not all of it (e.g. what is the '/' vs. the '~.' at the top?)

[axtho]

I managed to get the AoT down to 3mb for the vendor bundle. The first chunk.js file still has 1,14mb and the main.bundle.js is at around 1mb also. All in all .. still too much. From the explorer it seems as if some things get loaded twice (unless I rad that tool wrongly).

[asaph26]

Components being loaded twice across bundles seems like the norm.

However, 3MB for the vendor files seems too much.

This is how it looks for my project

[axtho]

There seems to be a difference on what angular-cli reports and what the explorer shows, because when I look at that I see only 1mb:

[asaph26]

Yes. There is a major difference in that. (I thought I mentioned this earlier).

In the early days this was the size of the generated files plus the source maps.

Looking at the file size directly also showed this difference.

So I guess this issue can be closed.

[axtho]

@asaph26 You did mention it ... I recall now. Thanks for the invite. I'll check it out some time. Are you doing that part time as well?

[asaph26]

Yes. It is a part time project to just make my activities in church a bit easier.

[axtho]

@asaph26 then we have something in common :)