Angular Performance - My learnings

I’m not going to talk about the compiler or any framework nuances in this article. This is basic improvements which do not need much effort

Photo by chuttersnap on Unsplash

Web Performance is one of my favourite topics. Angular has done a lot in recent times to improve out of the box performance when compared to its old versions. However, there is still a lot of grounds to cover.

A great deal of us web devs in this era of fast internet and powerful devices sometimes tend to keep the web performance on the back burner until it comes to bite us. However, if we think about it, its way more rewarding and sensible to tackle it right from the beginning and follow at least some of the best practices which will get most of us through.

There are a few aspects to cover when we talk about performance improvement tasks in the world of javascript. They can be broadly categorised as:

• Framework related Improvements
• Native Javascript

Let’s talk about how to optimise Angular. Some small improvements which can be done without much effort.

Avoid Dangling Subscriptions

With RxJs being extensively used in angular, if not used properly, it’s really easy to create memory leaks.

One easy way to avoid this is to unsubscribe from all the observables which are created.

There are a multiple ways this could be achieved. There are a lot of good articles available out there, so I will skip the details.

The most important tip I can provide is

Use async pipe in html templates. Or if that is not possible use OnDestroy hook to unsubscribe.

OnDestroy is one the lifecycle hooks in angular. The purpose of this method is to give us the control to do any cleanup after the component is destroyed.

There are a few ways we can achieve that. My preferred way is to use the add() method available on Subscription.

add multiple subscriptions which can be unsubscribed later in OnDestroy

Did you know OnDestroy is implemented in angular services as well. Which means we can unsubscribe all the unwanted observables when the service is no longer needed.

takeUntil is another approach which we can follow to unsubscribe from all the subscriptions.

Modules

Create as many modules as possible. This sounds counter intuitive but I can’t stress it enough how many times I get into a situation where I feel that I should have created a module.

• Use proper scoping of services within modules and components
• Lazy loading of all the routes

Use build budgets for alerting at compile/transpile time

Using build budgets is a really good tool when your code starts to grow and go out of control. This helps us in understanding when to think about creating a new module or think of a different solution.

To add build budgets you’ll need to find the angular.json file in you project. I prefer having different budgets for different environments.

angular.json > projects > {projectName} > architect > configurations > {env} > budgets

I usually would start to think about refactoring when it starts warning. You can set these to a number which makes sense. The default values are reasonable though.

Do not forget the good old ngFor track by

Make it a habit to have the track by added to the ngFor at all times. It’s easy to forget but it helps in the long run.

Do not call functions in Views/Html templates — they are evil

This is self explanatory. The function gets executed every time angular detects a change which can lead to some really sluggish page rendering. So instead of having the function call in the html, do that in one of the lifecycle methods. You can assign the return value to a variable and use that in the template/html.

Refactoring

Do not be afraid of refactoring. It’s absolutely necessary. I like to think of the my code as a living being, it is constantly growing and evolving. Keeping that in mind change your code as and when needed. Most often then not it will end up improving the quality, readability and maintainability at the very least.