In this post I will show that putting entities in the same file does not impact Tree Shaking.
My personal preference is to avoid putting more than one class or “thing” in the same JS file. I find that over time the shared file just grows into something unmanageable that forces a refactor down the road.
However, does sharing a file between multiple functions or classes impact Tree Shaking?
One might worry that a bundler like Rollup will include the contents of the entire file if any portion of it is used by the application.
Luckily this is not the case. It doesn't matter how many statements there are in a single file. Only referenced statements will be included in the final bundle.
Here are a few examples of this.
In utilities.js we see two classes; Logger and NameHelper.
My app (main.js) happens to only need NameHelper, so I don't want Logger to be included in my final bundle.
Luckily the Tree Shaker (Rollup) is smart enough to handle this for me.
Below are three examples of ways to import NameHelper and still get the desired effect.
In the first option I am calling out the NameHelper specifically in the import statement
Even though there are multiple classes hiding behind './utilities', only NameHelper is included in my bundle)
In my next example I have listed the Logger in the import statement by mistake. Will that have any bearing on the result?
Luckily no. As long as you're not using the imported Logger symbol beyond the import statement you are fine.
In my last example I have used a * in the import statement with an alias. Will this confuse the bundler?
Nope, we are still good. The only difference is that we have to account for the alias when referencing the NameHelper.
In all three cases we end up with the same exact bundle.
No trace of the Logger in the bundle.
I have put the code up on Github in case you want to take a look.