Tree shaking — How to write code and reduce the bundle size in Webpack 4+
Tree shaking has become more popular during recent days and hence now its becomes a vital responsibility for a bundler to support tree shaking.
Okay why it is much more important?. The answer is below,
No user will wait for more than 3 seconds for a page to load.
So its important to keep the bundle size as small as possible for a web page to load fast. Webpack and Rollup are the two popular bundlers which supports tree shaking.
In this article, I am going to speak about some guidelines to write code that support tree shaking and also how to reduce bundle size in Webpack.
Write or compile code to ES6
Since tree shaking works by marking the export and import statements as unused, it is better to write or compile your code to ES6 format. Unused imports will be removed during minification process.
If your browsers does not support ES6 codes then there are many transpiler available to do the conversion (For example: Babel).
Use Feature Module (Loose coupling)
Segregate features into separate modules. Know your customer before planning your web site or library.
All users are not going to use all of your library features, so its always a good practice to segregate the features into separate modules and allowing the user to inject when needed.
The feature modules should be loosely coupled with main module and also ensure to avoid explicit usage of the feature module classes or functions inside main module. Create a pub-sub pattern for your website/library to perform communication between modules.
Learn to use functional programming paradigm
Well, writing code using functional programming paradigm allows you to easily maintain and deliver a bug free product. Below are some of the things, you need to know when using functional programming.
- Write pure class/functions.
- Use array methods such as
filter,some,mapetc. - Avoid using shared state.
- Avoid mutating state.
You can find a complete explanation about Function Programming in the Master the JavaScript Interview: What is Functional Programming? drafted by Eric Elliott.
Set sideEffects — Reduce bundle size in Webpack
When you have followed the above sections in your code then you are halfway away from enabling proper tree shaking capability for your code.
The last thing, I need to share is the use of settings sideEffects keyword as false in your package.json file. Settings this will inform the webpack that your code/project is safe to exclude the re-exported classes/functions.
Please go through the webpack official documentation for more information on marking your project with sideEffects key.
Conclusion
In this article, we have seen how to use write code that can be tree shaken properly and setting sideEffects keyword in package.json to mark the project as safe to exclude the re-exported codes.
If you enjoyed this article, please give a clap. And also leave a comment if you find any mistakes. Happy coding.. :-)
