JavaScript Bundlers, a Comparison

How do JavaScript bundlers stack up against each other?

In this article I’m going to introduce you to JavaScript module loaders and bundlers. I’ll explain what they are and why they exist. First, I’ll give you an overview of the different module formats and module loaders out there and I’ll present some examples for each. Then, I’ll talk about the most well-known bundlers and I’ll compare them with each other.

If you are familiar with the different module definitions and loaders you may want to skip to the “Bundlers” section. If you just want to read the comparisons you can skip to the “Comparisons” section.

Please note that the comparisons done in this article are based on a very simple example. I’m working on another article in which I’ll compare bundling results for bundling a React app.

Below are the specs of the machine that I used to run the builds:

• MacBook Pro (Retina, 15-inch, Mid 2015)
• Processor: 2.2 GHz Intel Core i7
• Memory: 16 GB 1600 MHz DDR3
• Graphics: Intel Iris Pro 1536 MB

All the code examples for this article are available on Gitlab.

TL;DR

• JavaScript over time became widely adopted and needed a module system to enable modular code design. The global object was/is error prone and just downright bad.
• Two prominent module definitions were developed as part of the community effort: CJS (CommonJS) and AMD (Asynchronous Module Definition).
• CJS was defined as a synchronous definition intended for server-side JavaScript. Node’s module system is practically based on CJS with some minor differences.
• AMD was defined an asynchronous model intended for modules in the browser and RequireJS is the most popular implementation of AMD.
• You may have also heard of the term UMD thrown around a lot. UMD stands for Universal Module Definition. It’s essentially a piece of JavaScript code placed at the top of libraries that enables any loader to load them regardless of the environment they are in.
• A standard module system was finally introduced in 2015 as…