Nice article!
Valerii Iatsko

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!).

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.