Bundler comparison
Tags: bundling
Published: 2021-10-03 12:11:48

I've now used six bundlers, so I thought I'd compare them. I've used them all to convert SCSS to CSS and minify it, most of them to convert TypeScript to JavaScript and minify it.

## Bundlers

### [Gulp](https://gulpjs.com/)
This is the first one I ever used, so I have a fondness for it. Although I haven't used it for TypeScript. Creating the setup file is fairly easy to understand because it's just JavaScript. And I like that you can just tell it to run something to convert the SCSS or convert the TS/JS or both, or tell it to watch for changes. It's also pretty quick to run.

### [Webpack](https://webpack.js.org/)
I have only used this once - although I've technically used it in Create React App, I never ejected, so never played with any settings. I like that you can have different settings for development and production. The set up is hard to understand and I have found it to be a bit slow. Which is why I only used it once.

### [Parcel](https://v2.parceljs.org/)
This is really easy to set up because you don't need to do anything, just install it and it works it all out for itself. I have had no end of problems Autoprefixer and PostCSS, though. And I find that if you have an error, even once you've fixed it, it won't show you the site, you have to stop it and re-start it. This was my favourite, due to the lack of setup, but this drove me to look at other bundlers.

### [Rollup](https://rollupjs.org/guide/en/)
The set up here is in JSON, so it's easy enough to understand. And it is quick. I did have a problem with it not loading any CSS when I made a change - I had to press refresh in my browser. However, that problem was only in Firefox and not Chrome, and it could be due to clashing with an extension. After I used this, I went and learnt Svelte, which it turns out uses Rollup by default, and I haven't had the not loading CSS problem in Firefox.

### [Snowpack](https://www.snowpack.dev/)
This is the only one where I had to go and check the project I used it on to see what it was like. It's another one where the setup is in JavaScript and it's reasonably fast.

### [Vite](https://vitejs.dev/)
The documentation says it's fast and they're not kidding. It is instant. And, like with Parcel, there's no setup. It was so easy to use it's almost like it's not there.

## Conclusion
I've used some of these more than others, so in some respects making a comparison is not fair. On the other hand, I loved everything about Vite. It's definitely my favourite and one I'll happily use in future. I've sometimes spent my entire coding time in the evening just playing about with the bundler, which is really frustrating. With CRA I set it up and then go and do something else, it's so slow, and I've spent a lot of time with CRA, so the speed of Vite is something I'm really loving.

After that I'd say that Gulp, Rollup and Snowpack are all much of a muchness, really. Of them Snowpack required a bit less setup, but it's not much different. Of the three I probably prefer Snowpack, but that's entirely based on me liking the name better.

Parcel used to be my favourite, but I went off it after having so many problems with it. It's possible they're resolved by now, as I haven't used it for a while, but why use that when Vite is similar, just faster?

Webpack just feels overly big and complicated in comparison to to others. It's definitely my least favourite of all of them.

What's your favourite bundler?