Improve Performance of Angular app

Improve Performance of Angular app

1: Lazy loading module

The enterprise application built using angular contains many feature modules. All these modules are not required to be loaded at once by the client. With large enterprise applications, the size of the application increases significantly with time, and it also increases the bundle size.

Once the bundle size increases, the performance goes down exponentially because every KB extra on the main bundle contribute to slower:-

• Download
• Parsing
• JS Execution

This can be solved using lazy loading. Lazy Loading is loading only the necessary modules at the initial load. This not only reduces the bundle size but also decreases the load time. Other modules are only loaded when the user navigates to the created routes. This increases the application load time by a great deal.

2: Pure Pipes

In Angular, pipes transform the data to a different format. E.g., the:- 'date | short date converts the date to a shorter format like 'dd/MM/yyyy.' Pipes are divided into two categories:-

• Impure pipe
• Pure Pipe

The impure pipe is those pipes that produce different results for the same input over time. The pure pipes are the pipes that produce the same result for the same input. 

3: use AOT compilation

As we know that Angular provides two types of compilation:-

• JIT(Just-in-time)
• AoT(Ahead-of-time)

Afterward 8 version, Angular provides the AoT compilation by default, which increases the performance. Because the JIT compiles the application in the runtime. Also, the JIT compilation bundles the compiler with itself, which increases the size of the bundler. Also, it increases the rendering time of the component.

But with the AoT compilation, compiles the application in the build time, produces only the compiled templates, and doesn't include the compiler. So, the bundle size decreases, and rendering time increases significantly. So, We should always use AoT compilation for our applications.

4: Remove Unnecessary Imports and packages from projects.

5: Unsubscribe the Observable after rendering the content Click here to learn how to UnSubscribe

6: Use trackBy option for *ngFor directive 

7: Cache static content using Angular Progressive Web App (PWA)

Caching the static content will make your Angular app load faster as it will already be in the browser. This is easily done using Angular PWA which will use service workers to cache the static content, that is the js, css bundles, images and static served files, and present them without making a call to the server.

8: OnPush change detection

The default change detection behavior for components is to re-render every time an asynchronous event has happened in the app such as click, XMLHttpRequest, setTimout. This can become a problem because this will cause many unnecessary renderings of the templates, that may not have been changed

OnPush change detection fixes this by only re-rendering a template if either:

One of its input properties has gotten a new reference

An event from the component or one of its children eg. click on a button in the component

Explicit run of change detection

To apply this strategy you just need to set the change-detection strategy in the component’s decorator:

@Component({

  selector: 'app-login',

  templateUrl: './login.component.html',

  styles: [],

  changeDetection: ChangeDetectionStrategy.OnPush

})

export class LoginComponent implements OnInit {

}

9: Preloading Strategies 

There are two types of preloading mechanisms.

Preloading modules — Loading modules asynchronously in the background is called preloading modules. This technique should be used with lazy loading.

@NgModule({

    imports: [RouterModule.forRoot(routes, {preloadingStrategy : PreloadAllModules})],

    exports: [RouterModule],

})

export class AppRoutingModule { }

Preloading in Angular means loading the Lazy loaded Modules in the background asynchronously, while user is interacting with the app. This will help boost up the loading time of the app. 

    By Preloading the lazy loaded module, the user do not have to wait for the module to be downloaded as the module is already downloaded in the background.

Preloading component data —Using resolvers for the routes to block a component from rendering until the data is available.

Reference: https://www.dotnettricks.com/learn