Comparison of JavaScript Bundlers
Sonja Laurila · Theseus (Ammattikorkeakoulujen) · 2020
The objective of this thesis was to provide a thorough overview of the ideology of bundlers and then create a comparison of four different bundlers selected by their popularity. The study first focused on building a solid understanding of the history of modular JavaScript and how the need for a tool such as bundler arose, how the bundling process goes and what kind of optimization steps the bundling process includes. Next, four different bundlers were configured to bundle a simple React web application. After that a set of test runs was performed to get comparable results of the bundling speed and the resulting bundle size. The bundlers were evaluated from both technical and usability perspectives. As a result, a good understanding of the bundling process and the different bundlers and their characteristics was gained to be able to make better informed decisions when selecting a bundler for a certain use case. As a summary, Parcel would be great for beginners and getting the development environment up and running quickly. Parcel also offers extremely quick rebuild times due to caching. Webpack offers the best flexibility, quick rebuild times and good chunk splitting options. Rollup will most probably result in the smallest bundle size due to its advanced tree shaking capabilities. As to Browserify, it would probably be good to keep it on the server-side JavaScript, if the user is not already familiar with it.