Valerii Iatsko thanks for the comment :)
Good point! Adding before vs. after section in my article.
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 .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, 36.2% of its original size.
Tree-shaking is definitely powerful (and easy to use!).