Lower you expectation for Webpack’s Tree Shaking

Recently I upgrade my project from webpack1 to webpack3, one of the main highlight feature for me is Tree Shaking. Depnding on the static structure of ES6 module system, webpack is now able to get rid of unused modules from your build.

That sounds very cool, but after I finished my upgrade and rebuilt my project, the decrease of the file sizes did not reflect my expectation.

Why? Did I not use it right, or is it actually not working?

So then I created this test project which is used to test what impact will have on your code with webpack’s new tree shaking feature and what configuration needs to be made to enable the feature.

Test Example Code

I created two independent directories for test, one is for webpack1 the other is for webpack3.

In both directory, I have test code using lodash as well as my own code.

Final Conclusion

As soon as Tree Shaking does not work effectively with libraries like lodash, the major benefits we can get may actually from downsizing our own code by getting rid of unused dead code.

However, for most project caring very much about its performance, they might already have been using tools like ESLint – Pluggable JavaScript linter to help them avoid bad practices during their development.

So I doubt how much impact will Tree Shaking have on serious projects, which is why I think you should lower your expectation, it is not a cure for your file size related performance issues, though it is good to have this extra feature.

Instead of relying on tree shaking, following best practices like alway import modules you actually use is a better way to keep your dist file small.