What does "Tree-Shaking" mean?

4

I closely follow all the development of the Angular. I know that the third generation of the rendering engine ( Ivy , codenamed for Render 3) will launch soon.

Overall, the goals for this new renderer are:

Asyoucanseeinthediagramabove,oneofthepromisesofthisnewengineisthereductionofbundlesize,andfromwhatIunderstoodthetechniqueusedforthisreductionis"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)

    
asked by anonymous 26.07.2018 / 04:07

1 answer

6

In fact, it generally applies to JavaScript, or more precisely to the generation of "optimized" JavaScript code. The original code may be in TypeScript, JavaScript, or other language. According to Wikipedia the concept came in the context of LISP in the 1990s , but it is the solution to a common problem in dynamic languages. The concept is likely to be older than this Usenet messaging.

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

The metaphor is that of a tree because this is done by constructing the dependency tree of your code, which tells which module / file depends on which others. Generally the tree shaking algorithm will go through its code from one or more input points (files), and mark the other files that are being quoted by import , mounting a tree with the modules actually used in the code.

References

26.07.2018 / 04:44