What is Tree Shaking and Why Would I Need It?

Question

I've started learning about Angular 2 and have come across this term "tree shaking" and I haven't been able to find any good explanation of it from a beginners' perspective.

I have two questions here:

1. What is tree shaking and why would I need it?
2. How do I use it?

Answer 1

I see you have three questions here; 1. What is tree shaking? 2. What's the need of it? 3. And, how do you use it?

1. What's tree shaking?

Tree shaking refers to dead code elimination. It means that unused modules will not be included in the bundle during the build process.

When we import and export modules in JavaScript, most of the time there is unused code floating around. Excluding that unused code (also referred as dead code) is called tree shaking.

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.

2. What's the need of tree shaking?

Tree Shaking helps us to reduce the weight of the application. For example, if we just want to create a “Hello World” Application in AngularJs 2 then it will take around 2.5MB, but by tree shaking we can bring down the size to just few hundred KBs, or maybe a few MBs.

3. How to use / implement 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.

// modules.js
export function drive(props) {
 return props.gas
}

export function fly(props) {
 return props.miles 
}

// main.js
import { drive } from modules;

/// some code
eventHandler = (event) => {
  event.preventDefault()
  drive({ gas: event.target.value })
}
/// some code

// fly() was never importent and won't be included in our 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.

Answer 2

It just means that code that is in you project but not used/referenced anywhere will be dropped. Like if you import a full library just to use 1 function in it. It reduces compile code size.

Answer 3

The Tree Shaking process reduces the download size of an application
Tree shaking not exporting the modules that are not needed by our application in the bundle file, it is not going to remove the unused code from the bundle.
Webpack removes the links and UglifyJs Plugin removes the code