They are not the same, and the term comes from Lisp in the early 90s, not JavaScript. Tree-shaking is actually "live code inclusion" - in other words, it approaches the problem from the other direction.
In Lisp this might work like this (did and still does work in some commercial Lisp systems):
For example a Lisp system may consist of starting a memory image from disk, which leads to a live running memory heap. The tree shaker then may break unused links in memory - either automatic or under programmer direction. The garbage collector then frees the unused memory. Lisp then dumps a new (typically smaller) image, which has unused code and data removed.
They both start at the entry block (or exported symbols if it's a lib) and traverse the program graph, keeping only live branches. There is no “other direction”. Tree shaking is the same as dead code elimination.
All tree shaking is dead code elimination, but not all dead code elimination is tree shaking (in webpack at least).
Tree shaking happens at the import level. If I say `import { abc } from 'some-lib'`, tree shaking won’t include any other objects some-lib may export.
Removing a branch that can never be true, like `if ('production' === 'production') { … } else { /* dead code */ }` is dead code elimination, but webpack wouldn’t consider that tree shaking.
Comments
They are not the same, and the term comes from Lisp in the early 90s, not JavaScript. Tree-shaking is actually "live code inclusion" - in other words, it approaches the problem from the other direction.
https://en.m.wikipedia.org/wiki/Tree_shaking
In Lisp this might work like this (did and still does work in some commercial Lisp systems):
For example a Lisp system may consist of starting a memory image from disk, which leads to a live running memory heap. The tree shaker then may break unused links in memory - either automatic or under programmer direction. The garbage collector then frees the unused memory. Lisp then dumps a new (typically smaller) image, which has unused code and data removed.
Such features appeared no later than end 1980s.
They both start at the entry block (or exported symbols if it's a lib) and traverse the program graph, keeping only live branches. There is no “other direction”. Tree shaking is the same as dead code elimination.
That's exactly how all dead code elimination works. How else would you do it?
I really don't understand the difference. Please enlighten me.
All tree shaking is dead code elimination, but not all dead code elimination is tree shaking (in webpack at least).
Tree shaking happens at the import level. If I say `import { abc } from 'some-lib'`, tree shaking won’t include any other objects some-lib may export.
Removing a branch that can never be true, like `if ('production' === 'production') { … } else { /* dead code */ }` is dead code elimination, but webpack wouldn’t consider that tree shaking.