Learning material for professionals eager to explore the science behind building a successful online product

#ASKTHEINDUSTRY 25: Is transpilation overhead too much of a cost to justify the use of Rollup?

At first, I was like “yes, Rollup is meant to work with ES6” so you are pretty much forced to transpile your code. Which, if you care about the size of your bundles, may add more overhead than you are willing to accept.

Right after, though, I had an epiphany. I realized you don’t actually need ES6 and Babel to use Rollup, do you? Rollup actually just needs to understand your dependency graph, and for that it relies on the new import statement, brought in by ES6. But that is literally it!

So, yeah! Babel overhead may not be worth it, especially if you don’t ship that much JavaScript. But that doesn’t mean that you should give up on Rollup, the conveniences of the import statement (which leads to cleaner code and more maintainable projects) and the awesomeness that comes with a module loader!

All of this may sound obvious to you, but if you are like me and haven’t thought about it, here is how it works:

  • You write regular, broadly supported, ES5 modules
  • You export your modules à la ES6
  • You glue them together by importing the features you need
  • Rollup will simply figure out how to concatenate those modules together, replacing your import statements (!!) with the actual code

Boom. Your final bundle(s) will be regular ES5 code!

Why should you care you ask?

  • You can be sure scripts are concatenated in the right order
  • You get Tree Shaking for free
  • You don’t need to use ES6 if you don’t want to
  • You can write regular ES5 and save precious bytes by not incurring in the Babel overhead
  • Ultimately, your project is more maintainable, cleaner and leaner

I read each and every comment, contribute to the conversation with your thoughts!

Care to leave a comment? Drop down a line on the Twitters