What does "Tree-Shaking" mean?

Question

I closely follow the entire development of the Angular. I know the third generation of the rendering engine (the Ivy, code name for Render 3) will be released soon.

Overall, the objectives for this new Nderer are:

As you can see in the diagram above, one of the promises of this new engine is the reduction of Bundle size, and from what I understand the technique used for this reduction is the "Tree-Shaking".

What exactly does Tree-Shaking do?

How can it be used in other Typescript projects? (From what I read there is a correlation between Typescript and this technique)

Answer 1

Actually in general it applies to Javascript, or more precisely to the generation of "optimized" Javascript code. The original code can be in Typescript, Javascript, or other language. According to Wikipedia the concept emerged in the context of LISP in the 1990s, but it is the solution to a common problem in dynamic languages. It is very likely that the concept is older than this exchange of messages on Usenet.

The name comes from the idea of shaking a tree (translation of Tree Shaking) to bring down the rotten fruit and the dead leaves. Programming is a metaphor for the elimination of dead code, which exists in your project but is not used in practice. Think of the pile of junk that the npm and others include in their code base.

The metaphor is that of a tree because this is done by building the dependency tree of your code, which says which module/file depends on which others. Usually the Tree Shaking algorithm will scan your code from one or more input points (files), and mark the other files being cited by import, assembling a tree with the modules actually used in the code.

References (in English)

• Wikipedia

• Google Developers - Reduce Javascript Payloads with Tree Shaking

• Dr. Axel Rauschmayer, Exploring ES6. 16.8.2.1 Benefit: Dead code elimination During bundling