Angular Performance (1), Tuning

This series of articles will discuss Angular Performance issues.

Angular Performance (1), Tuning --- this article
Angular Performance (2), Caching --- Service Worker
Angular Performance (3), Change Detection

This article will demonstrate Performance Tuning in general.

A - Introduction

We have an app with Angular as front end, Web API as the middle tier to link to Database and Azure environment/virtual machines. The initial load of the app is quite slow, it is about 30~40 seconds to load the GUI in Angular. We will discuss this issue from the following aspects:

A - Introduction
B - Overview of Angular Performance Tuning
C - AOT compilation
D - Minification
E - Lazy Loading
F - Caching --- Service Worker: see Angular Performance (2), Caching --- Service Worker
G - Change Detection
H - Summary

B - Overview of Angular Performance Tuning

A starting point to consider the Angular Performance issue could be like this

Angular Performance Tuning

from Angular Performance Tuning: 15 Ways to Build Sophisticated Web Apps

In general, Angular Performance Tuning could include these steps:

Angular Performance Tuning

from The angular performance tuning steps - Google Search

Angular Performance Tuning

from Speed Up Your Angular App - 14 Angular Optimization Tips

Angular Performance Tuning

from 7 Tips to Optimize Your Angular App/Application

We will check and discuss the following points:

C - AOT compilation
D - Minification
E - Lazy Loading
F - Caching --- Service Worker: see Angular Performance (2), Caching --- Service Worker

Without

G - Change Detection

Because this might not be the reason to slow down our page loading.

C - AOT compilation

Angular Performance Tuning

AOT's Advantage:

AOT compilation mode + compression
- To give you a fair idea of the comparison between the bootstrap time for AoT and JIT compilation, let’s take a look at this graph:
- It demonstrates the difference in time-to-interactive between two Angular applications: One built with AoT and the other without it.

After Angular 12, the AOT is the only choice for Angular compilation:

Angular Performance Tuning

The file, angular.json, indicates, for Angular 11, aot is set as true by default, while in Angular 12, this default choice even disappeared. This indicates the fact:

AOT --- Ahead-of-time (AOT) compilation
- Although it was introduced in Version 8 as a choice, such as with the command ng build --prod
- By default since Version 9, set "aot": true in angular.json file;
- In version 12, JIT is deprecated associated with View Engine, i.e.
  - Ivy will be the only Rendering engine available for Angular;
  - AOT will be the only Compiler available for Angular

D - Minification

Many characters in our JavaScript code, including white spaces, newline characters, comments, and block delimiters, are used just for readability and visual purposes. They aren't necessary for the code to run correctly. The minification process removes these characters, simplifies names, and ignores unreachable code. By minifying your code, you speed up page download and execution times.

In our app:

Angular Performance Tuning