Basics Of Angular And Its Versions - Part Four

Angular Compilers

In this article, I am going to discuss Angular Compilers. Before reading this article, please go through my previous articles for better understanding,

• Basics Of Angular And Its Versions - Part One
• Basics Of Angular And Its Versions - Part Two
• Basics Of Angular And Its Versions - Part Three

What is Compiler

Compiler is a process which compiles the code into universal code. In Angular, we have two models of compilation.

• JIT (Just-in-Time compilation)
• AOT (Ahead-of-Time compilation)

You might have wandered, why two compilers?

The goal of the Angular team is to provide better performance in a optimized way which results in faster page load and quicker change detection. So, the Angular team provides two types of compilers and both have their own pros and cons. Based on the need basis we have to select the compiler.

The magic of the Angular Compiler: transforming your HTML templates into optimized TypeScript code which creates an equivalent DOM structure.

JIT (Just-in-Time compilation) compiler

JIT is a compiler which compiles the code during runtime in the browser. When we use JIT compiler then when an end user requests for any resource then the JIT compiler compiles the code first before executing each request.

AOT (Ahead-of-Time compilation) compiler

AOT is compiler which compiles at build time. The advantage of AOT compiler is that it identifies and reports all build error at compile time only before starts execution.

In the development build by default JIT compiler is on and AOT compiler is off. Whereas in the production environment, AOT is the default compiler.

How Angular works internally

The compiler actually replaces the browser and parses the HTML for you. This gives us consistent parsing across all browsers.

Angular compiler takes all the metadata in the form of decorators for whatever you write and takes all your templates, style sheets etc. and analyzes them, which is called parsing. And finally, it creates a tree out of them, that you can call an abstraction tree. And from that tree, it generates a TypeScript code if you use AOT compilation, and it generates JavaScript code if you use JIT compilation. Finally TypeScript / JavaScript code instantiating the application. The entire internal workflow in a graphical form as below,

JIT Vs AOT

In JIT compilation the browser needs to download the Angular compiler first, whereas with AOT compilation it does not have to.

While the application is being JIT compiled in the browser, users have to wait, whereas, with AOT, the application is pre-compiled so there no such wait.

With JIT compilation, the template binding errors are only known at runtime, whereas with AOT compilation as with AOT compilation we will come to know about them at build time.

By default below commands uses JIT compilation

ng serve / ng s

In the development build, to turn on AOT compilation we have to use like below:

ng serve -- aot

In production environment since it is by default AOT compilation, so no need to set it on.

Whereas to turn off AOT in production environment, we have to execute the below command;

ng build --prod -- aot false  

What happens when we do a build our application using ng build command?

When we do a build using ng build command then few of the standard files get generated as below.

 

The vendor.bundle.js file contains the compiler along with the Angular framework. This file contains half of the code related to the Angular compiler. To investigate the size of bundle files, Angular provides a tool called source-map-explorer tool to inspect JavaScript bundles. So in order to use the source-map-explorer tool, first we have to install it. We can install this tool using npm tool, here is the below syntax to install it:

npm install source-map-explorer --save-dev

Once we install the source-map-explorer tool using the above command, a few of the folders will be generated in the node_modules folder as below,

After being successfully installed, we have to do a development build using ng build command which generates the bundle files.

Now to inspect the vendor.bundle.js file, write the below npm command:

C:\Angular5\AngularDemo>node_modules\.bin\source-map-explorer dist\vendor.bundle.js

The above-highlighted command analyzed the given bundle file and draws a source map report in a graphical form as below.

Notice in the above graphical report, the total vendor.bundle.js file size is more than 2MB and out of 2MB size, only Angular compiler took more than 1MB. So with this, we can say the file contains half of the code related to the Angular compiler.

Now let's do a production build to inspect a vendor.bundle.js in the production environment. We know that in the production environment, AOT is the default compiler.

ng build --prod

We know that in a production environment, ng build command is not going to generate the source-map report, but the source-map-explorer tool to work in the production environment, we have to set it on. Below is the command to set the source-map-explorer tool to turn on.

ng build --prod -sm true

Now you can run the source-map-explorer tool against vendor.bundle.js file in the production environment.

Notice that in the above graphical report, the file size is just around 313KB and the compiler option is not there because in production environment AOT is the by default compilation and with AOT compilation as our application code is already pre-compiled, that is why compiler option is not available in the above graphical picture.

I would appreciate your valuable comments :)

<<Click here for the previous article