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.
- Scaffold your application as described in the article on getting started.
- Run the
ng build --prodorng serve --prodcommand to build or serve your application with Tree Shaking enabled.