The Tree Shaking process greatly reduces the download size of an application.
This section provides information on what Tree Shaking is and how it works.
Tree Shaking is a process in which unused module exports are removed. It works on both source and library modules.
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
export statements. CommonJS modules cannot be optimized because of the dynamic nature of the
In order for the Tree Shaking process to work properly, Angular applications require an Ahead-of-Time (AoT) compilation.
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.
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 --prodor
ng serve --prodcommand to build or serve your application with Tree Shaking enabled.