Tricks to minimize React.js build file size
When using React.js in my personal projects, I found out that when the project grows bigger and bigger, the final build file gets bigger and bigger as well.
This is definitely not good.
Not good for page performance, neither for user experience.
So, how can I minimize the file size?
I spent some time looking around all possible solutions, and here are some efficient tricks that can solve the problem.
1. minify front end code
This is the most commonly used method when we want to minimize front end file size. If using Webpack as React.js build tool, we can use webpack.optimize.UglifyJsPlugin to minify front-end needed files.
2. create production env variable in Webpack config
3. tree shake
According to current stable version (1.13.2), Webpack does not support ES6 tree shaking. But there is one little trick we can use:
When setting up babel config, use the following preset:
With Webpack 1.13.2, tree-shaking works like magic. :)
Before vs. After
Use my personal project as an example. I have 10 React components (most of them are having long definitions and more than 5 functions). CSS is not included in the final bundle.js build file.
Here is result:
- original file size(with no optimization): 1.35MB
- with tree-shaking: 576kB (-58.3%)
- with tree-shaking + Production env variable: 544 kB (-60.6%)
- plus minify: ~10% of previous step’s file size (544 kB)
If using these 3 tricks together, the final size of bundle.js would be ~500kB, only 36.2% of its original size.
These 3 tricks are definitely powerful, and easy to use!
Future: Webpack 2.0
I am excited to see Webpack 2 support ES6 tree shaking, and simpler way setting up Node.js production flag in Webpack config.
Currently Webpack is beta-testing v2.1 version. I am trying out different new features. It’s awesome to see Webpack is getting better and better!
What’s your trick?
I would like to know what’s your trick when optimizing React.js performance. Leave a comment and let’s discuss!
Hi there, thanks for reading!
Check my previous React Native post here:
Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.
If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!