Angular 4 packet size after AoT

Question

Our application, which we created approximately, consists of 400 components and 70-80 services. We got the AOT assembly, where main.js is 5.8 MB, and vendor.js has 1.2 MB. I do not know if this comparison is correct. The entire size of our application folder is only 4.24Mb. Since our App folder is only 4.24Mb, then the AoT file size should be smaller. From this link https://github.com/angular/angular-cli/issues/4896 I found out that html was compiled during build, so the html size will be increased. The following are the third-party libraries that we use:

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

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

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

And we also use "PDFMake".

I basically have two questions:

• Is increasing the size of main.js to 5.8Mb acceptable using the reason why the html code will be compiled during assembly for 400 components.
• What the vendor.js file does. Does it have third party libraries that are included or files such as PDFMake?

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

Answer 1

First of all, the supplier includes all your dependencies.

I experimented, and these were my results:

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

* I use lazy loading, so this will be the size of my main package and others.

In my case, my primary identifier is abbreviated. I believe that my application is too small to judge whether your increase is acceptable.

I don’t know why you don’t want to use light boot, but there is another option. There is an experimental option --build-optimizer . These were my results:

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

This reduced my vendor from 0.5mb. I did not see any noticeable consequences for my core, probably because it is small. The option also combines the main and vendors, so you need to add --vendor-chunk=true to create a provider.