Rollup vs. Parcel vs. webpack: Which Is the Best Bundler?

The battle of the bundlers

Rollup vs. Parcel vs. webpack: Who wins as the best choice for a bundler?

Recently I was publishing a library to npm and I thought of experimenting with the bundler I was going to package my code in. While webpack has always been my standard choice, I decided to put it up against two other popular bundlers — Rollup and Parcel.

For those coming from a non-JavaScript background, a bundler is a tool that recursively follows all imports from the entry point of your app and bundles them up into a single file. Bundlers can also minify your files by removing unnecessary white spaces, new lines, comments, and block delimiters without affecting their functionality.

Let’s try to understand this through a simple code snippet:

var test = [];
for (var i = 0; i < 100; i++) {
  test[i] = i;
}

We just created an array called test and initialised its members till 100. The minified version of this code will look somewhat like this:

for(var a=[i=0];++i<20;a[i]=i);

Fewer characters and lines. You might say the code is not readable, but who cares? You bundle your code once it’s ready, and minified code is easy to fetch and interpret for the browser.

It must be now easy for you to guess the importance of a bundler, right?

Suppose your code is not bundled and hosted as a package of multiple files on the server. For the import of each of these files to make your code run, the browser has to send a separate HTTP request to the server. The efficiency of this transmission is directly proportional to the number and size of the files being requested. In the case of large apps such as Facebook, this can lead to disastrous performance and UX.

However, the performance of the app substantially improves with a bundler on board as now the browser only has to request a single file to display your app to the user. Moreover, fetching a minified file weighing a few KBs is faster than the actual file, which might run into MBs, resulting in improved load time of the app.

Why Install Bundlers When We Can Do It on Our Own?