6

We are developing an application using Angular 5. After running the ng build --prod --aot and deployed the dist folder to the dev server the main bundle produced 2.2MB on initial load. It's already small compared to 8MB vendor bundle size (when running ng build --prod) but still, we need to lower the size of the main bundle. Is there any way to lower the size of the main bundle?

network

JonathanDavidArndt
  • 2,518
  • 13
  • 37
  • 49
Eugene
  • 67
  • 1
  • 2

2 Answers2

2

You can reduce the bundle size by adding build-optimizer flag to your build:

ng build --prod --build-optimizer

Try running the above command. For more info visit: https://angular.io/guide/deployment

AFAIK you need not have to include --aot flag when building using --prod. Production build is aot by default.

Updating to the latest version of angular is also a solution for this. Since latest version often comes with more optimized build procedures.

Gautam Krishna R
  • 2,388
  • 19
  • 26
  • Hi Gautam, I tried to ran the command but the size main bundle still 2.3 MB – Eugene Apr 06 '18 at 07:34
  • Hi @Eugene then try using the steps provided in the following answer: https://stackoverflow.com/a/43358855/4214976 – Gautam Krishna R Apr 06 '18 at 07:37
  • Tried this command "ng build --aot --prod --build-optimizer=true --vendor-chunk=true" and it lowered the size from 2.3MB to 869KB. However it created a vendor file with the size of 1.7MB which I think still the same – Eugene Apr 06 '18 at 08:01
  • --aot and --build-optimizer are suprlus when using --prod – Antoniossss Jun 27 '18 at 11:50
0

I believe you need to separate your code into modules and load them lazily.

Ramdane Oualitsen
  • 402
  • 5
  • 13