Angular App Optimization Tips for Frontend Developers

How to optimize an Angular app? First, we need to consider how we understand optimization as such. Optimization helps achieve better app performance and easier code maintenance. Optimization is not a checklist or a to-do-list, and there is no universal way to optimize your app.

Optimization is a process, and it should start at the same time as the app development. It’s really hard to optimize the application that already exists (though it’s still possible of course), so we should take care of it during the whole project.

Here’s a list of the best tips to help keep your code in line with good practices and make your Angular application faster. Enjoy and optimize!

To get in-Depth knowledge on Angularjs you can enroll for a live demo on Angular Online Training

1. Code minification

Trivial, but really important – each part of the application should be minified before deploying to the production stage. If you have ever used Webpack, you probably know plugins such as UglifyJS, MinifyCSS, etc. They remove every whitespace and every function that is never executed. Moreover, they change functions’ and variables’ names to shorter ones that make the code almost unreadable, but the size of the compiled bundle is smaller.

Fortunately, with Angular, we don’t have to remember to add Webpack scripts to minify the code. All we have to do is make a bundle using ng build –prod command. It’s just good to know when and how it happens.

OnPush Change Detection

Each Angular component has its own Change Detector that is responsible for detecting when the component data has been changed, and automatically re-render the view to reflect the changes. Change Detector is called whenever DOM emits an event (button click, form submit, mouseover etc.), an HTTP request is executed, or there’s an asynchronous interaction such as setTimeout or setInterval. On every single event, the Change Detector will be triggered in the whole application tree (from the top to the bottom, starting with the root component).

The numbers show the order of checking the changes by the Change Detectors after the event in the Component in the left bottom corner. To change Detection Strategy for the component, the changeDetection in Component declaration should be set to ChangeDetectionStrategy.OnPush as below:

@Component({
   ...
   changeDetection: ChangeDetectionStrategy.OnPush
})

After that, the Change Detectors will work by comparing references to the inputs of the component. Inputs in this component are immutable and if values in these inputs have not changed, change detection skips the whole subtree of Change Detectors, as depicted below:

Take your career to new heights of success with Angular Training

Change detector for a component with OnPush Strategy will be triggered only when a value in @Input() has been changed, an event has been emitted by a template, an event has been triggered by Observable in this component or this.changeDetector.markForCheck() has been called.

Pure pipes instead of functions/getters in templates

class foo {
   private _bar: boolean = false;
   get bar(): boolean {
      return this._bar;
   }
}

get used in the view is nothing more than a function call. A better idea is to use pure pipes which will always return the same output, no matter how many times they will receive the same input. If the Change Detector reaches this view and pure in the pipe is set to true (default), the Change Detector will not check if that value has been changed because it knows that it will return exactly the same value.

 Async pipe

<div>Time: {{ time | async }}</div>

The async pipe allows subscribing to Observable directly from the template.With async pipe, there’s no need to bother about unsubscribing. What’s more, Change Detector will check if the value was changed only when Observable had changed itself.

5. Unsubscribing

When using RxJS, it’s really important not to forget about unsubscribing, otherwise there’s a risk to get memory leaks in our application. There are a few methods to unsubscribe a Subscription, but choosing the best one is probably a subject for another blog post – for now, just remember to do it. Here are the methods →1st method:

let sub1: Subscription;
let sub2: Subscription;

ngOnInit() {
   this.sub1 = this.service.Subject1.subscribe(() => {});
   this.sub2 = this.service.Subject2.subscribe(() => {});
}

ngOnDestroy() {
   if (this.sub1) {
      this.sub1.unsubscribe();
   }
   if (this.sub2) {
      this.sub2.unsubscribe();
   }
}

2nd method:

let subs: Subscription[] = [];

ngOnInit() {
   this.subs.push(this.service.Subject1.subscribe(() => {}));
   this.subs.push(this.service.Subject2.subscribe(() => {}));
}

ngOnDestroy() {
   subs.forEach(sub => sub.unsubscribe());
}

3rd method:

private subscriptions = new Subscription();

ngOnInit() {
   this.subscriptions.add(this.service.Subject1.subscribe(() => {}));
   this.subscriptions.add(this.service.Subject2.subscribe(() => {}));
}

ngOnDestroy() {
   this.subscriptions.unsubscribe();
}

4th method:

ngUnsubscribe = new Subject();

ngOnInit() {
   this.service.Subject1.pipe(takeUntil(this.ngUnsubscribe))
      .subscribe(() => {});
   this.service.Subject2.pipe(takeUntil(this.ngUnsubscribe))
      .subscribe(() => {});
}

ngOnDestroy() {
   this.ngUnsubscribe.next();
   this.ngUnsubscribe.complete();
}

Get More Info On Angularjs Online Training