Bundler Showdown: Webpack, Rollup, & Parcel
Creating and optimizing a JavaScript project bundle is a challenging process. Setting up your workflow process is tedious, and making your own configuration files at the start is about as fun as getting a root canal — painful but necessary. Selecting the right bundler for your project cannot only save you time and headaches during the build process, but also dramatically affect the load time for your page (shout out to React for making bundle.js bigger than the annotated edition of War and Peace*). However, before diving in too far into the deep end, let’s do a quick recap on what a module bundler is.
Bundling is the process of taking a collection of different pieces of code and sewing them together as a package of assets to be consumed by a client in a browser. Currently, Webpack, Rollup, and Parcel are the most performant in their build sizes and times, but it may not be immediately obvious what strengths and weaknesses each possess.
Webpack is currently the most mature and established bundler in the JavaScript ecosystem. It was created to manage all types of static assets and third party libraries and include them as modules, whether it be JavaScript CommonJS/AMD/ES6, styles (CSS/Sass/Less), images, media, etc. Webpack introduced code splitting, the separation of a codebase into distinct chunks that are requested on demand. Webpack’s ecosystem of loaders transform ES6/ES7, JSX, Typescript, and other resources into natively understandable JavaScript, and plugins provide other kinds of transformations,
including minification and uglification. Webpack also supports tree shaking: the ability to import part of a module rather than its entirety, thereby eliminating dead, unused code, and reducing bundle size. One issue with Webpack is the size overhead it introduces when bundling together large amounts of small modules due to its wrapping each module within a separate function scope. Earlier this year in February, the highly performant Webpack 4 was released, providing 98% faster build times and smaller bundle sizes to help mitigate this weakness.
Parcel is a far younger player in the game, but it’s been gaining a lot of traction recently due to its speed and ease of use. It is hands down the most user-friendly bundler, requiring zero (you heard that right) configuration. No longer is there a need to create a finely-tuned, complex configuration file in which you manually specify all the loaders necessary to handle any transpilations. Parcel’s builds are also incredibly fast due in part to the fact that they process bundle assets using multiple computer threads out of the box. Builds speed up even more on rebuild due to an efficient filesystem cache. Parcel also allows for either JS and HTML files as an entry point. Upon specifying an entry file, Parcel immediately goes to work without the need to install extra plugins. Parcel supports zero-config code splitting. As of June, Parcel also supports tree shaking for commonjs and es6 modules.
Our final contender, Rollup, is a bundler built around the ES6 module format. This standardization allows it to produce output modules within the bundle with minimal overhead. Rollup is particularly good at performing aggressive tree shaking and dead code elimination to provide a small output bundle. In particular, Facebook made a big transition to switch from bundling their React library in Webpack to Rollup to decrease bundle size. Additionally, Rollup introduced code splitting in February, and thus can now dynamically deliver portions of the codebase to users, thereby reducing initial load times.
As a recap, all three bundlers include tree shaking, the removal of unused code; all three also support code splitting, the splitting of code into separate bundles, and dynamically loading them as needed. Common wisdom a year ago used to be that Webpack was good for apps and Rollup for libraries. This was because Webpack had code splitting (good for delivering apps in a slow network), whereas Rollup produced smaller bundles due to its module format. But with improvements in Webpack’s performance, Rollup’s addition of code splitting, and Parcel’s recent support of tree shaking, choosing between the three is becoming more difficult by the day.
Despite their apparent similarities, not all bundlers are equal, and, depending on your project, choosing the right one could save you time and space in both development and production. However, often the time and difficulty of writing hundreds of lines of configuration and migrating from one bundler to the other ties a team completely to one build process. Sometimes a team knows in advance that making the migration will result in a smaller bundle and can afford to take the time to make the switch, as in the case of Facebook’s substantial pull request that bundled their React library with Rollup rather than Webpack. However, for those who don’t have the facebook’s resources at their disposal to test each, figuring out the best bundler can be quite. Inertia or uninformed allegiance can dictate which build tool gets used, and this leads to less than optimized builds being served to production scale.
One recent application, Bundle Bee, allows developers to compare different bundlers’ performance on their projects with zero configuration. It displays granular data on module build time and bundle size for each bundle type , and automatically generates all the necessary configuration files (in the case of Webpack and Rollup) to build a project via Webpack, Parcel, or Rollup. Just drop your project directory into the app, and let it do the work. The results are presented in a few different charts, allowing you to get an instant glimpse of performance, and migrate between them at the click of a button. You can quickly test your current bundle configuration, and also compare it to the other options, allowing you to choose the most performant in terms of speed and bundle size.
So, to wrap (roll?) it all up, there exists a diverse selection of excellent bundlers out there currently. Taking the time to choose the right one is a task frequently kicked down the road by most developers as something to get to ‘eventually.’ Despite this tendency, module bundling differences have a tangible and important effect on both production load times and overall development times, and it is thus in everyone’s best interest to spend a little time figuring out which bundler is right for you. Comparing the options is easier than ever before, so don’t wait till tomorrow to test things out. The effort will be well worth your while.
