CODEWITHSUNDEEP
angularangular-cli
TheMonkWhoSoldHisCode
TheMonkWhoSoldHisCode

Reputation: 2332

Tree shaking and dead-code elimination in angular-cli documentation

From the Angular-CLI documentation below, I am not able to gather the meaning of "limited" tree shaking or dead code elimination. Does that mean we should not be relying on the tree-shaking and dead code elimination abstractions that angular-cli provides?

Bundling & Tree-Shaking

All builds make use of bundling and limited tree-shaking, while --prod builds also run limited dead code elimination via UglifyJS.

Another documentation question It seems that --prod provides the --aot flag for free. Meaning if your build is --prod, the code is pre-complied in to Javascripts. However, from the -aot specific documentation (quoted below) it seems that the default aot flag is false. Any experience with these flags?

aot --aot default value: false

Upvotes: 3

Views: 2439

Answers (1)

Trevor Karjanis
Trevor Karjanis

Reputation: 1724

I recently had the same questions, so here are the results of my research.

  • Tree-shaking removes dependencies as defined by dependency injection (DI).

    Tree shaking refers to a compiler option that removes code from the final bundle if that code not referenced in an application.

  • The dead code elimination performed by UglifyJS is a post-processing step that removes unreachable code (e.g. code that follows a return).

    dead_code (default: true) -- remove unreachable code

As of Angular CLI 6, the build system has been overhauled to be more easily configurable. Build configuration options have been moved to the workspace configuration file (angular.json).

A "production" configuration is created by default when you use the CLI to create the project, and you can use that configuration by specifying the --prod option.

The difference between the default development environment and production is that the development configuration uses the CLI defaults (e.g. source maps) while the production configuration enables AOT, optimizations, etc. The --prod meta-flag targets the "production" configuration and enables the runtime production mode.

Switching to production mode makes it run faster by disabling development specific checks such as the dual change detection cycles.

Upvotes: 3

Related Questions