Comparison of JavaScript Bundlers

Abstract

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.

Työn tavoitteena oli luoda kattava kokonaiskuva koodin koontityökalujen (bundlerien) ideologiasta ja laatia vertailu, jossa vertaillaan neljää suosituinta koontityökalua.

Opinnäytetyö keskittyy ensin rakentamaan syvällisen ymmärryksen modulaarisen JavaScriptin historiasta ja siitä, kuinka tarve koontityökalun kaltaiselle työkalulle heräsi. Mitä koontiprosessin aikana tapahtuu ja minkälaisia optimointivaiheita koontiprosessi sisältää. Konseptin ymmärtämisen jälkeen neljä eri koontityökalua konfiguroitiin niin, että niillä voitiin koota yksinkertainen React-sovellus. Konfiguroinnin jälkeen ajettiin testiajoja, jotta saatiin vertailukelpoisia tuloksia koontityökalujen nopeudesta ja tuloksena saadun kootun tiedoston koosta. Koontityökaluja arvioitiin sekä teknisestä, että käytettävyyden näkökulmasta.

Lopputuloksena saatiin hyvä käsitys koontiprosessista ja eri koontityökaluista sekä niiden eroista, jotta voidaan tulevaisuudessa tehdä parempia päätöksiä valittaessa koontityökalua tiettyyn käyttötapaukseen. Yhteenvetona Parcel olisi hyvä aloittelijoille ja kehitysympäristön käynnistämiseen nopeasti sekä sen välimuistin käytön vuoksi tarvittaessa erittäin nopeita uudelleenkoontiaikoja. Webpack on kaikista joustavin ja tarjoaa myös nopeat koontiajat. Rollup todennäköisesti saavuttaa pienimmän kootun koodin koon, koska sillä on erinomaiset ”puunravistus”-kyvyt (tree shaking). Browserify on ehkä hyvä pitää serveripuolen JavaScriptissä, ellei käyttäjä sitten ole jo entuudestaan perehtynyt siihen.