Angular Tools for High Performance

This blog contains a list of few new tools and practices which can help in building faster Angular apps and monitor their performance. The focus is on decreasing the initial load time and speeds up page navigation using code-splitting and preloading.

Some of the topics are:

1.    Code-splitting
2.    Preloading strategies
3.    Performance budgets

Initial Load Time And JAVASCRIPT

The most important asset in an angular application is javascript, full angular is based on javascript. When a browser downloads a javascript file, first it needs to decompress it then parse it then finally executes it. So it becomes difficult for an application to run javascript on initial load.

There are some methods to reduce this load time:

1.   Minification and dead code elimination
2.   Code split

The CLI of angular 8 is deadly capable of minifying bundles and eliminating code size. In v.8 There is also differential loading support which minifies the load time for javascript.

Code-splitting with Angular

There are two ways for code-splitting:

1.   Component level code-splitting
2.   Route level code-splitting

The main difference between these two ways is in component-level we can load the components individually without routing.
For ex:  We can load a component on clicking on the placeholder, or pop-ups components etc.

In another way we route the components lazily. First, the whole bundle is downloaded then component is rendered.

Component Level Code Splitting

In the current version, it is very difficult for a component level because of the files and bundles that angular cli generates. But ivy in v8 will resolve some of the issues. But the future releases, angular will work on using these capabilities to deliver ergonomic APIs for component level code-splitting. But still, for now, there are two community libraries which we can use for component-level:

1.  ngx-loader
2.  @herodevs/hero-loader

Route-level Code splitting
The technique involves:

1.  Generate a new module
2.  With loadChildren, declare a lazy route in a parent module
3.  Generate a new component in the lazy loaded module
4.  Declare an eager route declaration in the lazy module

In v8 do this with single  code:

Preloading Strategies

Performance budgets
To monitor apps over time, the Angular CLI supports performance budgets. These budgets allow us to specify limits in which the production bundles of our application can grow. 

Thanks