Webpack vs Rollup vs Parcel vs Browserify — Bundle size, build time, ease of use comparison

Hong Yong
Hong Yong
May 12, 2020 · 5 min read

Bundling JavaScript libraries and other assets together is a common practice among modern web developers. The primary reason is to reduce and improve the first page request load time. The longer a website takes to load, the higher the chances that the visitor will just move on and close the webpage altogether.

A website’s loading time can be reduced by bundling various assets together, performing minification by removing redundant data, making use of tree shaking to eliminate dead codes that are never executed, and more.

We’ll be looking at different bundlers that have their own pros and cons, and they will be evaluated based on the bundle size they generate, the build time that each bundler takes, and ease of use.

To start things off, we’ll be using ReactJS to create a new React app and also including a few different third-party libraries in our website, namely LeafletJS, ApexCharts, and Material-UI. This will provide the assets that every bundler will need to work with. The libraries are imported in the entry file.

import React from 'react';
import { render } from "react-dom";
import { Marker, map, latLng, control } from "leaflet";
import ApexCharts from "apexcharts";
import { Button } from "@material-ui/core";
import logo from './logo.svg';

The libraries used are shown below.

"dependencies": {
"@material-ui/core": "^4.9.13",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"apexcharts": "^3.19.0",
"leaflet": "^1.6.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
}

Webpack

Webpack is arguably the industry standard when it comes to bundlers having offer tons of different plugins and configuration options for developers, and not forgetting the massive community support available.

The following dependencies are installed for Webpack.

"devDependencies": {
"@babel/core": "^7.9.6",
"@babel/preset-env": "^7.9.6",
"@babel/preset-react": "^7.9.4",
"babel-loader": "^8.1.0",
"file-loader": "^6.0.0",
"path": "^0.12.7",
"terser-webpack-plugin": "^3.0.1",
"url-loader": "^4.1.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
}

A Webpack configuration file is provided via webpack.config.js, making use of all the dependencies above. The bundling process is then started with

webpack --mode production

Webpack took a total of 8.38 seconds to build, and the resulting bundle size was 810.3 KB.

Webpack was moderately easy to setup and use, with a few minor errors encountered along the way due to some missing dependencies that needed to be imported. It has a ton of customization options available, making it highly scalable for large enterprise projects.

Rollup

Rollup is an alternative to Webpack, and also includes different plugins for developers to explore and make use of.

The following dependencies are installed for Rollup.

"devDependencies": {
"@babel/plugin-external-helpers": "^7.8.3",
"@babel/preset-env": "^7.9.6",
"@babel/preset-react": "^7.9.4",
"@rollup/plugin-babel": "^5.0.0",
"@rollup/plugin-commonjs": "^11.1.0",
"@rollup/plugin-image": "^2.0.4",
"@rollup/plugin-node-resolve": "^7.1.3",
"@rollup/plugin-replace": "^2.3.2",
"rollup": "^2.9.0",
"rollup-plugin-terser": "^5.3.0"
}

A Rollup configuration file is provided via rollup.config.js, making use of all the dependencies above. The bundling process is then started with

rollup -c rollup.config.js

Rollup took a total of 10.4 seconds to build, and the resulting bundle size was 805.7 KB.

Setting up Rollup was a royal pain, having to deal with an endless stream of errors with it trying to bundle LeafletJS, Material-UI and even React libraries. The workaround for these errors is to make use of namedExports option in the CommonJS plugin.

namedExports: {
'node_modules/react/index.js' : ['useDebugValue', 'memo', 'useLayoutEffect', 'useImperativeHandle','useMemo'],
'node_modules/leaflet/dist/leaflet-src.js': ['latLng', 'map', 'control', 'Marker']
}

This is but a subset of what’s hiding in my configuration file. Each function that is used in the website must be specified and placed inside namedExports to prevent Rollup from throwing an error in your face. This has a huge impact on the scalability of the project, as we do not want to deal with bundling errors every time we decide to add a new library to the project.

Parcel

Parcel is marketed as a foolproof, simple to use bundler with no configuration needed. It also boasts multi-core compilation by making use of worker threads, and uses a filesystem cache for fast rebuilds.

The following dependencies are installed for Parcel.

"devDependencies": {
"@babel/core": "^7.9.6",
"parcel-bundler": "^1.12.4"
}

@babel/core was automatically installed by Parcel on the first run.

Parcel runs with zero configuration, omitting the need for a configuration file. The bundling process is then started with

parcel build src/main.js --experimental-scope-hoisting --no-source-maps

..where “src/main.js” is the entry file, tree shaking is enabled and source maps generation is disabled.

Parcel took a total of 7.08 seconds to build, and the resulting bundle size was 809.6 KB.

Parcel was by far the easiest to setup and get running. It sacrifices customization options in exchange for ease of use, which might become a problem when the project is scaled up.

Browserify

Browserify is another popular bundler with various third-party library support available.

The following dependencies are installed for Browserify.

"devDependencies": {
"@babel/core": "^7.9.6",
"@babel/preset-env": "^7.9.6",
"@babel/preset-react": "^7.9.4",
"babelify": "^10.0.0",
"browserify": "^16.5.1",
"tinyify": "^2.5.2"
}

A configuration file was also omitted for Browserify, with the bundling process being started with

browserify src/main.js -o public/bundle_browserify.js -p tinyify -t imgurify -t [ babelify --presets [ @babel/preset-env @babel/preset-react ] ]

..where the plugin tinyify is used to provide various optimizations including tree shaking and minification, imgurify allows us to bundle images. Entry file and output file was specified.

Browserify took a total of 31.98 seconds to build, and the resulting bundle size was 1186.4 KB.

Browserify was easy to setup, which is just identifying libraries that is needed for the website, and installing them via npm. Watchify is a plugin that will automatically rebuild the bundle file on the fly, as the source codes are updated. This can make up for the long building time of Browserify.

Verdict

Out of the four bundlers tested, Parcel stands out for its ease of use and slight speed advantage over the other bundlers. Browserify’s performance was subpar at best, with a long build time and a near 50% increase in the generated bundle size.

Aside from that, the other bundlers have nearly similar bundle sizes and negligible differences in build time. I would recommend using Parcel for small to medium scaled projects, and Webpack beyond that. That is not to say Webpack cannot be used for small-scale projects, there is just more initial configuration to be done as compared to Parcel.

In these modern times we live in, we are spoiled by the bundler choices given to us. I hope that this comparison will help in making a decision between different JavaScript bundlers.

The Startup

Get smarter at building your thing. Join The Startup’s +724K followers.

Hong Yong

Written by

Hong Yong

Hello! I have a passion for everything technology-related, and would love to share my experiences and findings with the masses.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +724K followers.

Hong Yong

Written by

Hong Yong

Hello! I have a passion for everything technology-related, and would love to share my experiences and findings with the masses.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +724K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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