Just-in-Time (JiT) vs Ahead-of-Time (AoT) compilation in Angular

Question

I was referring this documentation and came across the compilation concept. One can use either JIT or AOT compilation. However, I found it very brief and need to know follow

Answer 1

JIT - Compile TypeScript just in time for executing it.

• Compiled in the browser.
• Each file compiled separately.
• No need to build after changing your code and before reloading the browser page.
• Suitable for local development.

AOT - Compile TypeScript during build phase.

• Compiled by the machine itself, via the command line (Faster).
• All code compiled together, inlining HTML/CSS in the scripts.
• No need to deploy the compiler (Half of Angular size).
• More secure, original source not disclosed.
• Suitable for production builds.

Answer 2

JIT (Just-in-Time Compilation)

Just-in-Time (JIT) is a type of compilation that compiles your app in the browser at runtime.

ng build
ng serve

AOT (Ahead-of-Time Compilation)

Ahead-of-Time (AOT) is a type of compilation that compiles your app at build time.

ng build --aot
ng serve --aot

Answer 3

At the end fo the day, AOT(Ahead-of-Time) and JIT(Just-in-Time) do the same things. They both compile your Angular code so it can run in a native environment (aka the browser). The key difference is when the compilation happens. With AOT, your code is compiled before App downloaded in Browser. With JIT, your code is compiled at runtime in the browser.

Here is comparison:

Benefits of AOT:

• Faster startup as Parsing and Compilation doesn’t happen in the Browser.
• Templates gets checked during development(which means all the errors which we see in the javascript console in the running apps otherwise will then be thrown in our build process).
• Smaller File Size as unused Features can be stripped out and the Compiler itself isn’t shipped.

Answer 4

JIT compiler we use during development of the angular project. In this compilation(TS to JS conversion) happens during the runtime of the application. Where as AOT is used during building the application code for the deployment of the application in production, that time we build our application code using ng build --prod command which generates a folder called webpack, webpack contains the bundle of all the files(HTML, CSS and typescript) in compressed javascript format.

The size of the webpack folder generated for the production is far less than the folder generated for the development environment (using command ...ng build), because It does not contain the compiler inside the webpack folder, It improves the performance of the application.

Answer 5

Benyamin and Nisar mentioned some good points here. I will add to it.

While theoretically, AOT looks an attractive option than JIT for production purpose but I had my doubt whether AOT really worth it!

Well, I found nice stats by Jeff Cross and it does prove that AOT significantly reduces the bootstrapping time of the app. Below snap from Jeff Cross' post will give you quick idea about it,

Answer 6

Although there are some answers but I would like to add some of my findings as well, because I was really confused with what actually is being compiled as in all the cases, TS --> JS conversion happens. I am taking some para from Jeff's blog as a reference.

JIT

The TS code written by the developer is compiled to JS code. Now, this compiled js code is compiled by browser again so that the html can be rendered dynamically as per the user action and accordingly codes for angular ( for components, change detection, Dependency Injection) are also generated at runtime.

(The browser compiler is what takes an application’s directives and components, along with their corresponding HTML and CSS, and creates component factories to quickly stamp out instances with all of their view creation logic.)

When an Angular 2 application is bootstrapped in the browser, the JIT compiler performs a lot of work to analyze the components in the application at runtime and generate code in memory. When the page is refreshed, all the work that has been done is thrown away, and the JIT compiler does the work all over again.

AOT

The TS code written by the developer is compiled to JS code, this js has already been compiled for angular as well. Now, this compiled js code is compiled by the browser again so that the html can be rendered. But, the catch here is that the features of angular have already been taken care of by AOT compiler and hence the browser don't have to worry much about component creation, change detection, Dependency Injection. So, we have :

Faster rendering

With AOT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first.

Fewer asynchronous requests

The compiler inlines external HTML templates and CSS style sheets within the application JavaScript, eliminating separate ajax requests for those source files.

Smaller Angular framework download size

There's no need to download the Angular compiler if the app is already compiled. The compiler is roughly half of Angular itself, so omitting it dramatically reduces the application payload.

Detect template errors earlier

The AOT compiler detects and reports template binding errors during the build step before users can see them.

Better security

AOT compiles HTML templates and components into JavaScript files long before they are served to the client. With no templates to read and no risky client-side HTML or JavaScript evaluation, there are fewer opportunities for injection attacks.

---

Remaining differences are already covered in bullet points of Benyamin, Nisar & Gaurang.

Feel free to correct me