Angular 4 bundle size after AoT

Question

Our application which we created roughly has 400 components & 70-80 services. We got AOT build where main.js has a size of 5.8 Mb and vendor.js has 1.2Mb. I don't know whether this kind of comparison is correct or not. The entire size of our App folder is only 4.24Mb. Since our App folder is only 4.24Mb then the AoT file size should be lesser than it. From this link https://github.com/angular/angular-cli/issues/4896 I came to know that the html is compiled at build time so the html size will be increased. Below are the third party libraries that we are using :

1. Ag-Grid (https://github.com/ag-grid/ag-grid-angular)

2. Angular2-JWT (https://github.com/auth0/angular2-jwt)

3. MyDatePicker (https://github.com/kekeh/mydatepicker)

And we are using "PDFMake" also.

I have two questions mainly:

1. Is the size increase of main.js to 5.8Mb is acceptable with the reason that html code will be compiled at build time for 400 components.
2. What does vendor.js file consist of.does it have the third party libraries which is included or files like PDFMake?

I really want to know how i can reduce the file size of main.js without lazy loading and gzip compression?

Answer 1

First of all, vendor does include all your dependencies.

I did some experimenting and these were my results:

• ng build total: 6.5mb, vendor: 5.5mb, main*: 0.4mb
• ng build --aot --prod total: 2.2mb, vendor 1.7mb, main*: 0.3mb

*I'm using lazy loading so this will be the size of my main bundle and others.

In my case my main id shrink. I think my application is too small to judge whether your increase is acceptable.

I don't know why you don't want to use lazy loading but there is another option. There is an experimental option called --build-optimizer. These were my results:

• ng build --aot --prod --build-optimizer=true --vendor-chunk=true total 1.8mb, vendor 1.2mb, main*: 0.3mb

This decreased my vendor with 0.5mb. I saw no notable effects on my main probably because it is to small. Also the option merges main and vendor so you will have to add --vendor-chunk=true to generate the vendor.