AngularCli build and server --aot vs --prod

Question

I'm converting an Angular2 app using commonjs for JiT and the old way of manually configuring aot (two index.html files, two main.ts files, etc) to the angular4 cli template (ng new appName).

It seems much has changed around the cli between 2/4. Watched some youtube videos, created a new app with the ng cli, and I'm seeing that both ng build and ng serve support --prod and --aot flags but the generated webpacks are different in size when using the two different flags.

What is the difference between

ng build --prod

and

ng build --aot

and then for serve:

ng serve --prod

and

ng serve --aot

it seems that prod bundles are smaller than aot bundles, but why?

`--prod` is prod build (this will be smaller) `--aot` is ahead of time compilation. — Steve Drake, Jul 14 '17 at 17:15
Yeah but what does prod do that isn't encapsulated in --aot? — cobolstinks, Jul 14 '17 at 17:15
https://stackoverflow.com/questions/40205903/angular2-cli-why-bundle-size-of-prod-smaller-than-prod-aot — Steve Drake, Jul 14 '17 at 17:19
prod will have less debug logs and it will likely do more checks. I think non prod build even do a double change check when you bind to `functions()` to see if it's managed to detect changes correctly. — Steve Drake, Jul 14 '17 at 17:22
I will load faster load my website. In website gtmetrix rank is 37. Which method should I use? — Mojtaba Nava, Sep 25 '19 at 15:14

score 41 · Answer 1 · edited Jan 03 '19 at 13:31

41

--prod- apply uglify and minify to reduce the bundle as well make angular work in production mode which reduces runtime warnings given by angular compiler as well increase performance.

--aot- generally when we serve angular project all the angular files are downloaded on browser and it will compile and execute the application on the browser but in aot entire application delivered to the browser is precompiled hence improves the performance

build- will bundle files and put it in dist folder so that we can use those for deployment on servers.

serve- will run the application on lite server.

edited Jan 03 '19 at 13:31

Sunil Garg

14,608
25
132
189

answered Jul 14 '17 at 21:08

Prathmesh Dali

2,250
1
18
21

1

for what its worth, can we combine both the args like ng build --aot --prod? – Ak777 Jul 13 '20 at 18:15

score 17 · Accepted Answer · answered Jul 14 '17 at 17:17

from Bundle size of “ng build --prod” smaller than “build --prod --aot

If you're using certain libraries that do not support AoT (and release UMD bundles) this might happen. The reason is that we cannot optimize components that are pure JavaScript. This is not something we can fix on our side, unfortunately.

Those libraries need to expose ES2015 modules with their decorators removed and their components/modules already AoT compiled. We are working on guidelines for libraries to support both JIT and AoT compilation.

Also, sometimes with some templates the AoT size might be larger than the JIT. The gzipped versions should be the other way around, as most of the AoT content is the same statements repeated over and over.

Although the bundle is larger, the bootstrap time should be significantly faster.

So is the recommendation to use the --prod flag when building an app prior to releasing it to users? — cobolstinks, Jul 14 '17 at 18:41

score 14 · Answer 3 · answered Feb 19 '18 at 06:19

14

--prod turns on AOT, you don't need to pass both options. See this section of the docs: https://github.com/angular/angular-cli/wiki/build#--dev-vs---prod-builds

answered Feb 19 '18 at 06:19

Sajith Mantharath

2,297
2
17
19

1

where exactly does it say that? – chrismarx Apr 08 '19 at 13:27
2

"The ng build command with the --prod meta-flag (ng build --prod) compiles with AOT by default." - https://angular.io/guide/aot-compiler. – Dima Slivin Jul 23 '19 at 22:41

score 10 · Answer 4 · edited Jan 03 '19 at 13:30

ng build –prod OR ng build

Using the --prod flag allows Angular to do Ahead of Time Compilation (AOT).

AOT Ahead of Time Compilation

The Angular Ahead-of-Time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code.

Advantages of AOT:

1- Highlights the compilation error, runtime error and exception before running on the browser hence the name Ahead Of Time (AOT).

2- If you use ng build in your projects to build your application if you notice the file size of vendor.bundle.js and vendor.bundle.js.map files in your build directory it will be in MBS which get downloaded to the Browsers and make our application too loaded.

But on the other hand, if you use the flag ng build –prod you will notice an excessive decrease of this files to 200 KBS means 100 or more times lesser in size.

Therefore I recommend you to use the AOT in the building of Angular Application by using --prod flag.

And if you want further reading and information on this topic please refer to the following site: https://angular.io/guide/aot-compiler

AngularCli build and server --aot vs --prod

4 Answers4