Tree shaking is a term commonly used with Javascript and it refers to the process of eliminating dead code when trying to optimize it.
Before moving further, we should first understand what "dead code" means:
Dead code refers to code that is not being executed and has no impact on the final output. If you have
unused variables and functionsorlines that will never be reached, you most likely suffer of an obvious case of "dead code".
Now that we understand what dead code is, you might ask yourself, when and why do we need to eliminate it?
THE WHY
When sending Javascript over the network, the code is often compressed. What this mean is that, in reality the code is much bigger after the browser decompresses it. Then the hard work starts: after is being downloaded by the browser, JavaScript must be parsed, compiled and then finally executed. Compared to other resources (images for example), Javascript is expensive to process, so we had to come up with ways of making the code more performant.
THE WHEN
Among other techniques, tree shaking is one way we can improve Javascript's performance by reducing bundle size.
Bundle size refers to the combined file size of all JavaScript code, libraries, and dependencies that are bundled together and served to the end-user in their browser.
Bigger bundle size means longer loading times, so the goal is smaller bundle sizes. Tree shaking can help us achieve that while the code gets compiled.
THE HOW
- We declare all of our
importsandexportsfor each of our Javascript modules. - The bundler (Webpack, Rollup, Parcel etc) analyzes our dependency tree during the compilation.
- All unused code is dropped from the final bundle.
IMPORTANT - take advantage of the ES6 imports and exports
If you want tree shaking to happen, you must use exports and imports in your modules. If you use require, the bundler isn't able to reliably tell what is actually exported or imported so it can't determine what code is safe to drop.
RESOURCES
IMAGE SOURCE
Top comments (3)
We should mention that tree-shaking is a feature that most compiled languages do out of the box. They are often much more successful, as they have to "compile" all code into some kind of machine language. So, they have to build jump lists and internal references giving them a deep understanding of the internal connections. This makes it easy to identify dead code.
Compared to this, the capability of bundlers like Webpack or Rollup is faily limited. They can eleminate code only if it named as an export, but they will not find dead code inside a module. It is also easy to break tree shaking by simply building some jump lists, even if the functions are never used.
On the other hand, bundler can rewrite the code. Instead of a bunch of small files they can "bundle" all code in a single file, which can reduce loading time.
Thank you, very good observation. The article refers indeed to bundlers and specifically to Javascript.
Sure, but tree shaking is not a new invention. It´s important to see that tree shaking in JS - like we have it today - has some limitations and can easily be broken.