What does "Tree-Shaking" mean?
I closely monitor the entire development of Angular. I know that the third generation of the render engine (the Ivy , codenamed for Render 3) will be released soon.
Overall, the goals for this new renderer are:
As can be seen in the diagram above, one of the promises of this new engine is the reduction of the bundle size, and from what I understood the technique used for this reduction is "Tree-Shaking".
What exactly what Tree-Shaking does?
How can it be used in other TypeScript projects? (from what I read There is a correlation between TypeScript and this technique)
1 answers
Actually generally applies to JavaScript, or more precisely to the generation of "optimized" JavaScript code. The original code can be in TypeScript, JavaScript itself, or another language. According to Wikipedia the concept arose in the context of LISP, in the 1990s, but it is the solution to a common problem in dynamic languages. It is quite likely that the concept is older than this exchange of messages on the Usenet.
The name comes from the idea of shaking a tree (translation from tree shaking ) to knock down rotten fruits and dead leaves. In programming it 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 npm and others include in your codebase.
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 scroll through your code from one or more entry points (files), and mark the other files that are cited by import, assembling a tree with the modules actually used in the code.