2 minutes into Webpack tree-shaking and re-export

Intro

Let me start. We had a monolith frontend application with a lot of heritages from the past. Services were living in the same files with components or with each other. All was mixed, and strategy was like: “Let’s keep everything close — it’s easier to find what you need”. No matter if the file length is 200+, 300+, 500+ or even more lines of code.

Goal

The goal was how to make everything readable, smaller, and faster.

Implementation

Split everything possible, to files. Single responsibility is a golden bullet in this field. If you have a component with pure functions inside a file — split them.

With ES6+ syntax, we can use import … from syntax, and this is a perfect feature because we can use export … from as well.

Refactoring.

Imagine the file with such structure:

We can move this code to files:

utils
multiply.js
sum.js
calculateSomethingSpecial.js

One by one:

multiply.js
sum.js
calculateSomethingSpecial.js

Now we can import them one by one. But what about extra lines and these long names in our components? They are still like a weirdness:

Import refactored functions

For this we have an outstanding feature that came with new JS syntax it is called re-export. We should make index.js file to combine them all. With this, we can rewrite our code in such a way:

index.js inside utils folder

Now, we can finish with import all what we need inside App.js

Import what we need inside App.js

Done.

Testing

Now let’s check how our Webpack will compile a production build.

Let’s build a small React application to check how it works and if we load only stuff that we need or everything from this re-export index.js

Rewritten App.js

Live examples at CodeSanbox and Netlify

Compiled for production main.js chunk

As we can see, we loaded only a sum function from utils. Let’s check one more time, and this time, we will use multiply.

Live examples at CodeSanbox and Netlify

Compiled for production main.js chunk

Here we even do not see a function inside code because Webpack compiled our value before a deploy.

Final test

So let’s do our last test and use all of these functions to check, that everything works.

Final App.js

Live examples at CodeSanbox and Netlify

Final compiled main.js chunk

Awesome! Everything works as expected. You can try any stage just by using codesandbox link and deploy to Netlify.

Conclusion

Use code splitting; try to get rid of overcomplicated files. You will help yourself and your team as well. Smaller files are more quickly to read, easier to understand, better to support, faster to compile, better to cache, faster to deliver, etc..

Thanks for reading!

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store