Webpack, Rollup, Parcel, Snowpack, and beyond
What this post is not
This post will not get into bundle sizes, compilation times, and the nitty gritty of each bundler. But why? I wanna see the numbers!! The issue is each bundler uses different loaders based on the file type. Not all loaders are created equally and frankly, it would require a lot of effort to go through each individual loader for each bundler and create benchmarks. Instead, this post is a brief high-level overview of different frontend bundlers and the general problems they try to solve.
History
Why do we need bundlers? Browser-based Javascript prior to ES6
(introduced in 2015) had no way of
importing a file natively. Instead you either chained <script> tags,
or you had one massive Javascript file you would ship to the browser.
For example you may have the following in your HTML.
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="/dist/my-awesome-script.js"></script>
Now we get into the issue of, if my-awesome-script.js depends on
jQuery to load, what happens if loading the jQuery script fails? Is
my site now broken? You can quickly see why this is an issue. It gets
worse when you also realize that you cant break up your Javascript files
into smaller more manageable files.
The solution
As far as I can tell Webpack
Bundlers
There are currently 3 major traditional frontend bundlers that most
people talk about. Webpack
Choosing the right one for you
Webpack
“Webpack is for websites”, Webpack is the oldest of the 3 bundlers. Webpack, in my opinion, is also the most complicated to setup of the 3 bundlers. This isn’t a knock against Webpack, it’s a super powerful tool, but it is also quite complex. The reason people say this is that historically Webpack was used for websites, but theres no reason you can’t use it for an NPM package.
Rollup
“Rollup is for libraries”, Rollup is significantly more minimal than Webpack, Rollup doesnt even include a dev server! Rollup was released shortly after Webpack, based on my search around 2016. When it was first released it had minimal support for assets such as CSS, images, etc. However, nowadays Rollup is just as full featured as Webpack. There’s no reason you can’t use it for websites.
Parcel
Parcel is the newest of the 3 appearing at the beginning of 2018. Parcel states it is a “Blazing fast, zero configuration web application bundler”. Now I have the least experience with Parcel, however, my experience with Parcel has been nothing short of awesome. It holds true to its promise. It even supports both HTML and JS entrypoints. A lot of the issues people had with Parcel initially when it was first released was the size of its bundles. They have made great strides to be on par with Rollup and Webpack.
OK...So what is right for me?
Try all 3, see which one you like best. They honestly all accomplish the same task and can do roughly the same thing. As of Webpack 4, ESM is natively supported. Assets are fully supported by Rollup. Parcel bundle sizes are significantly smaller than they used to be. Seriously, just try them. The only caveat is that as far as I can tell Parcel is only for web apps and does not support bundling for NPM.
A new challenger approaches
ESM-based frontend “bundlers…compilers?”, I don’t know what to call them… are the cool new thing in the web dev world. They independently build each file in parallel getting rid of the traditional compilation step that people complain about with traditional bundlers.
The current issue with compilation is it can be quite slow, especially when you stop to consider changing 1 file can trigger a rebuild of your entire bundle including babel transforms, postcss builds, and everything in between.
The new ESM-based build tools like Snowpack and Vite leverage the ES6
import / export syntax to be able to provide blazing fast unbundled
development environments to increase productivity. This means the
compilation step is gone! No more waiting for bundles to regenerate.
Everything is independent. There is no massive recompilation on a single file change. It also more closely mimics a browser environment which all evergreen browsers (Chrome, Edge, Firefox) fully support ESM-based import / export syntax. And with the advent of HTTP/2 protocols, the issue of multiple waterfall network requests may soon be a thing of the past for assets.
Right now adoption is quite fast even though ESM-based compilers are fairly new. They have gained a significant amount of traction in the web development community.
In fact, I’m currently working on
Snowpacker
Summary
Parcel, Webpack, and Rollup are all great. Use whichever one you want. Historically Webpack was for websites due to its full feature set, Rollup was for libraries due to lack of asset handling and minimalism, and Parcel was for prototypes due to large bundle sizes, but I feel all 3 statements above are no longer true due to vast improvements by all 3 libraries, use whatever you are most comfortable with.
ESM-based build tools like Vite and Snowpack are showing great promise and appear to be the future of the frontend.