Tree Shaking and AOT
Tree Shaking is defined as a dead code elimination technique, where a static code analysis of the module syntax is performed to decide which parts of the Angular or other library modules need to be included in the final bundle. ECMAScript 2015 modules support import and export statements which allow for static code analysis and finding unused code. Angular CLI uses webpack2 along with UglifyJS to accomplish tree shaking. During the build process, webpack2 will mark the unused code and UglifyJS will remove it if it can determine it’s safe to remove and would not cause any side effects.
While compiling and deploying Cloud Parts®, Bamboo enables tree shaking and minification by enabling the Ahead of Time compilation (AOT).
JIT: npm run build
AOT: npm run build – AOT
Angular CLI supports JIT when targeted to development environments to make it easier for developers. However, this version is not minified/uglified and does not include tree shaking. The AOT is built-in when targeted for the production environment and applies stricter rules which might lead to more compilation errors than the non-AOT build. This is actually advantageous since more errors are detected during the compilation process and can be fixed rather than errors showing up during runtime.
For third-party libraries, Angular to perform tree shaking if the libraries also support tree shaking. This means that the libraries must be written in ECMAScript 2015 or greater and with some metadata for the AOT/ builds. Most of our products use Kendo UI for Angular, which does support tree shaking and AOT.
To demonstrate the effectiveness of the AOT build, production (AOT) and development (non-AOT) builds were run for three Bamboo Cloud Part® products: List Rollup, Calendar Plus and Chart Plus, and the total size of the bundle files were compared. The results are shown in the chart below. For all three products, there was an approximately 70% decrease in the size of the bundles. When using the AOT build, the unused library modules were removed during the tree shaking process and minification/uglification lead to more compacted executable code, resulting in this significant reduction in size.
(NOTE: @angular/cli >= 1.6.3, node: 8.9.4, Angular 5.2.6, webpack: 3.11.0, typescript: 2.6.2 are the different versions of the components when the results were tabulated.)