Tree Shaking

The Tree Shaking process greatly reduces the download size of an application.

Overview

This section provides information on what Tree Shaking is and how it works.

What Is Tree Shaking

Tree Shaking is a process in which unused module exports are removed. It works on both source and library modules.

How Does Tree Shaking Work in Angular

Modern bundlers, such as Rollup and Webpack 2, work by combining the full application code in a single bundle file. This file does not contain exports and supports the removal of the unused code by tools like Closure Compiler or UglifyJS. This process only works for ES2015 modules because they use static import and export statements. CommonJS modules cannot be optimized because of the dynamic nature of the require statement.

In order for the Tree Shaking process to work properly, Angular applications require an Ahead-of-Time (AoT) compilation.

Using Kendo UI with Tree Shaking

Out of the box, all Kendo UI components for Angular support Tree Shaking. Each package ships the required ES2015 modules, which are picked up and used automatically.

Compiling Applications with Tree Shaking

The following steps demonstrate an example on how to get Tree Shaking running in an application which is created with the Angular CLI Tool.

1. Scaffold your application as described in the article on getting started.
2. Run the ng build --prod or ng serve --prod command to build or serve your application with Tree Shaking enabled.

Suggested Links

• Webpack Documentation on Tree Shaking
• Angular CLI Documentation on Bundling
• All Things Angular Telerik Blog Page