Tree-Shaking Features in Angular

Tree-Shaking Features

The new view engine Angular IVY has been designed with tree-shaking in mind. Now you must be wondering that does Tree-Shaking means? Here we go, Tree-Shaking is the removal of unused pieces of code that leads to smaller bundles and quicker load times.

import { Component } from @angular/core;

import { ProductComponent } from './product.component';

const testCondition = false;

if(testCondition) {

    ProductComponent();  // The function will still be used

}

Tree-Shaking makes use of static analysis that means it actually does not run your code. Now, the benefit of this is that it considers all possible scenarios and includes everything needed in the bundle.

Let's understand the Tree-Shaking through an example. Suppose you have imported a function, which is hidden behind a false conditional. This function is never called, but will still get included in the bundle. Tree-Shaking removed that hidden function which is anyway never called and is of no use. IVY ensures that anything that you are not using something in Angular, does not get included in the bundle.

Angular Tree-Shaking features included:

Template Syntax

Life Cycle Hooks

Dependency Injection

Pipes

Content projection

Queries 

Structural directives

Listeners 

After understanding, the locality and Tree-Shaking and the benefits they bring along we can say that they are game-changers. When both are combined, we get:

Smaller builds

Quicker rebuild times

Faster development

Simplified pipeline

Code in human readable format

The drastic simplification of IVY pipeline makes templates a part of the stack trace. You do not have to deal with cryptic error messages due to broken template syntax. You will know the exact line number where the error is. You can easily be able to set break points in your templates for debugging.