Angular Tools for High Performance
Posted By : Nikita Agarwal | 30-Sep-2019
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:
2. Preloading strategies
3. Performance budgets
There are some methods to reduce this load time:
1. Minification and dead code elimination
2. Code split
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:
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:
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.