Concept of Tree shaking in Angular

Posted By : Palak Sharma | 31-Oct-2017

Angular

There are various ways to optimize our code like minification, concatenation, bundling our file etc . Tree shaking is one of the key concepts to optimize our code and remove unnecessary code. Tree shaking is the latest techniques that are performed by our build system after the Typescript complier compiles our code. Webpack2 is able to understand the import syntax without the use of loaders and that's why it is capable of performing tree shaking very easily.

 
{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    ...
  },
  ...
}

The first two lines of complier options are the key factors of tree shaking. We are our transpiling our code to ES5 and preserving import keyword for our modules.

The important factors to keep in our mind for tree shaking is:-

a) We need to use version 2.x of the package awesome-typescript-loader.

b) We need to keep the library and code in the same chunks of code.

c)We need to minify our files before build making.

Whereas web pack is basically performing the task of removing the unnecessary codes, but it will not remove unnecessary code from the bundle. It is the minifier of UglifyJsPlugin, that removes the code which is not required in the bundle.