What is tree shaking? š²
When we import and export modules in JavaScript, most of the time there is unused code floating around. Tree shaking or dead code elimination means that unused modules will not be included in the bundle during the build process.
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 import
and 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.