What is tree shaking? 🌲
Tools like webpack will detect dead code and mark it as “unused module” but it won’t remove the code. Webpack relies on minifiers to cleanup dead code, one of them is UglifyJS plugin, which will eliminate the dead code from the bundle.
It only works with
export. It won’t work with CommonJS
require syntax. Same applies to npm dependencies. great example is lodash, just
import pick from ‘lodash/pick and your bundle will only include one small module instead of entire lodash library.
Utilizing the tree shaking and dead code elimination can significantly reduce the code size we have in our application. The less code we send over the wire the more performant the application will be.