TreeShaking feature in Angular 8

Treeshaking is a feature to remove unused code in angular applications.This improves performance of an angular application to a great extent. For example,Normally in our code when we import any service in app.module, it will be applied to the whole angular application. Instead of doing like this, we can use the specific component which uses it.At present this is confusing,come let us dive into live example so that you can understand better.

Tree Shaking in Angular Services and Providers:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SharedService } from './shared.service';
@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [SharedService]
})
export class AppModule {}

in the above code,we imported sharedservice in appmodule.Whenever any component refers this sharedservice it automatically passes the instance of the service through constructor of the component. Treeshakers will consider imported statements are used in the angular applications.so when it bundles the code for production it includes that modules. But in our new way of calling service,the service will not be imported in app.module. Let us look , how we register our service in TSP,

import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class SharedService {
constructor() {}
}

The root injector makes the service singleton throughout the application. By the help of Injectable , we can tell angular which module to register.Here in the above example, we use root module to register the sharedservice.It ensures that this service is being called only if the component uses it.This is real treeshakable mechanism. The primary difference between previous registration of service and current registration of service is the way of registering the service.In older versions the service is registered in providers section of app.module.ts making the shared service being imported for the whole application, whereas in current versions the service is registered with injectable keyword in service itself.So that whenever the service is being called by any of the component, it imports the service and being used in the component.

Tree Shaking in Angular Framework:

So here comes new rendering engine in Angular 8, which uses IVY a new concept to reduce the bundle size of angular application. It is new pipeline for rendering of next generation angular framework.Its fast compilation of angular code is amazing. The partial changes of the angular applications are compiled first and makes the angular application to compile fast. The tree shaking concept is used to remove unused code during bundling process.The static analysis of angular code will remove unused and unreferenced code during compilation.

Locality in Angular Framework:

Another important feature is locality.This process will compile each component individually ,so that only modified code gets compiled instead of compiling whole project files.This increases the speed of the application dramatically so fast. The IVY needs the information of component only and not care about the metadata about the dependencies of the component.