Ahead-of-Time Compilation

Overview

Before the browser can render the application, the components and templates must be converted to executable JavaScript by the Angular compiler.

There are two ways to compile the Application: Just-in-Time (JiT) and Ahead-of-time (AoT).

Just-in-Time (JiT)

With JiT, you compile the app in the browser, at runtime, as the application loads.

As follows in Angular Documentation:

JiT compilation incurs a runtime performance penalty. Views take longer to render because of the in-browser compilation step. The application is bigger because it includes the Angular compiler and a lot of library code that the application won’t actually need. Bigger apps take longer to transmit and are slower to load.

Ahead-of-Time (AoT)

With AoT, the browser loads code of the application that has been pre-compiled at build time. It means the application can render immediately.

Other benefits:

  • Faster rendering
  • Fewer asynchronous requests
  • Smaller Angular framework download size
  • Detect template errors earlier
  • Better security

Compile with AoT

To learn more about Ahead-of-Time compilation, please take a look at the chapter “Ahead-of-Time Compilation” on angular.io that explain all about AoT.

An Example

We prepared an example that shows how to use Ahead-of-Time compilation with Apollo.

Edit on GitHub