1

I have created a web application with Angular 4. In that after aot compiling main bundle size is more than 700 KB. There is something called $_gendir and app in main bundle (Saw it in source map explorer). Can someone please explain about those?

Note : When i use --no-aot, main bundle size is 426 KB only.

Command used : ng build --base-href /rising/ --aot --prod --build-optimizer --vendor-chunk=true --sourcemaps --named-chunks --output-hashing=false

main bundle explored

Anand Kadhir
  • 233
  • 2
  • 7

1 Answers1

1

The image you shared shows it comes from the src folder, so I'm a bit confused. Although been a while since I've checked the source map explorer and I guess the internals of the cli have changed. Also it's >700KB not MB :). Big difference of a factor 1000 there.

Anyways, Ahead of Time is not a tool to reduce your bundle size. It's something to greatly reduce rendering time of the application and increase the overall speed a lot.

Generally speaking, at first your application will be smaller with AOT, but the bigger your application grows, you will reach a point that AOT will be bigger than JIT. I suppose you've reached that point!

Poul Kruijt
  • 69,713
  • 12
  • 145
  • 149
  • OMG, sorry i will edit, MB to KB, before someone else is confused. – Anand Kadhir Oct 09 '18 at 07:14
  • My application might have reached that point, but still, isn't 700KB huge? I hope my application is not that huge. – Anand Kadhir Oct 09 '18 at 07:16
  • @AnandKadhir As you can see, your roll trailer thingy is taking up most of the space. Could it be that you are using some external library there? Anyways, the angular framework is relatively big, the more you use from it, the more gets included in the bundle. Also keep in mind though, that you are going (or at least should) gzip the bundle. If done well, this reduces the network size with at least 70% – Poul Kruijt Oct 09 '18 at 07:21
  • thanks for your explanation. But the thing is currently we can't configure our server to compress the bundle. (BTW, is there any way to add gzipped files into spring boot?) And i have a vendor chunk separately, even though i use external libraries, i hope it would have been accumulated in vendor bundle. – Anand Kadhir Oct 09 '18 at 07:40
  • Using build-optimizer and vendor chunk is not advised. Total bundle sizes with Build Optimizer are smaller if there is no separate vendor chunk. For enabling gzip in your spring boot configuration i can refer you to [this](https://www.callicoder.com/configuring-spring-boot-application/#enabling-gzip-compression-in-spring-boot) link – Poul Kruijt Oct 09 '18 at 08:30
  • Thanks for sharing the link @PierreDuc. I hope Vendor chunk just separates the external library into vendor bundle. i.e. it splits the library code into separate chunk. So it is going to reduce the size of the main. However as you mentioned, i tried once without vendor chunk true, there was no vendor bundle but main bundle size crossed 1.4MB. :( We are not using embedded server for our application. It is deployed in WAS. So we need to enable compression in WAS, which we can't do currently. – Anand Kadhir Oct 09 '18 at 09:00