AoT in Angular
The initial compiler in Angular 1.x and Angular 2 is called JiT (Just-in-Time) compiler. As for AoT, it stands for the Ahead-of-Time compiler that was recently introduced in Angular. Compared to the JiT compilation performed by Angular at run-time, AoT provides a smaller bundle with faster rendering in the browser. Using AoT, we can reduce the angular2-starter to 428.8 kb compared to the original 1.2 MB and reduce loading times by skipping compilation in the browser.
|Bundle size||Huge (~1.2 MB)||Smaller (~400 KB)|
The gist of AoT is moving the compilation from run-time to the building process. That means, first we can remove the JiT compiler (which is around 523kb) from the bundle to have a smaller build, and second, the browser can execute the code without waiting for JiT in the run-time which leads to a faster rendering speed.
evaled. Also, by introducing compiled code in the building process, AoT makes the application more tree-shakable and open to various other optimizations. Bundlers like Rollup and Google Closure can take that advantage and effectively decrease the bundle size.
Besides, AoT compiler also inlines HTML templates and CSS files and help reduce the amount of asynchronous requests sent by the application. (Note: this caused a config bug that we will mention in a latter section)