loading...
Cover image for What's your fav bundler: Rollup, Parcel or Webpack?

What's your fav bundler: Rollup, Parcel or Webpack?

madza profile image Madza ・1 min read

A bundler is a tool that recursively follows all imports from the entry point of your app and bundles them up into a single file.

Bundlers can also minify your files by removing unnecessary white spaces, newlines, and comments without affecting the functionality.

The most popular bundlers are Rollup, Parcel and Webpack. Which one is your favorite bundler and why?

Discussion

pic
Editor guide
Collapse
patarapolw profile image
Pacharapol Withayasakpunt

esbuild is the future, now.

My favorite is actually Webpack, as it is the most reliable and customizable.

Collapse
ericgeek profile image
EricGeek

I like the concept, but I'm not sure if I'd use it for all Typescript projects. The types being ignored isn't an issue since that's usually checked in the development environment. However, each file is handled in isolation, so some Typescript features wouldn't work, or at least would behave differently when built by esbuild.

Far from a typescript or esbuild guru, so I'd look into this for yourself. I seem to recall one of the issues is when enums use explicit values and those values are defined in one file and used in another, for example.

That said, it works fine for what I consider "normal" usage, but my normal isn't a universal definition of normal.

As for the actual question, I've been off dealing with an ancient stack for so long that my experience with bundlers strictly academic until recently, so I don't have a favorite yet.

Collapse
madza profile image
Madza Author

Thanks for sharing! πŸ˜‰ This speed graph from their GitHub repo caught my attention πŸ‘€

img

Collapse
daviddalbusco profile image
David Dal Busco

ooooooh esbuild looks pretty cool / fast!

do you advice it for both libs and apps?
any tutorial to recommend?

Collapse
patarapolw profile image
Pacharapol Withayasakpunt

Actually, I haven't used it much, but I would try it in combination with Hugo.

I don't think it would support things like CSS in JS imports, or raw text file imports.

Thread Thread
daviddalbusco profile image
David Dal Busco

Thanks for the feedback!

Good to know, I might give it a try or at least keep a good eye on it πŸ˜‰

Thread Thread
daviddalbusco profile image
David Dal Busco

I gave a quick try to esbuild yesterday. My first impressions summarized:

  • the documentation is well made. It is easy to follow and I was able to setup a proof of concept without effort.

  • it is really super fast! I did not try with a big lib but still, that was for sure faster.

Only thing unclear to me is if it can be used for bundling libs and apps or rather mostly/only libs.

That is something I would still need to answer.

Overall, definitely positive about it.

Collapse
yoursunny profile image
Junxiao Shi

I'm not supposed to pick favorites.

My NDNts library is packaged as ES Modules only, and contains no CommonJS, but I do use CommonJS packages in dependencies. I tried all three bundlers with my library.

  • webpack 4.x is easy to work with. Everything compiles correctly.
  • webpack 5.x is not working at the moment. It's unhappy when I import CommonJS from ES Modules.
  • Parcel 1.x is working, and it can start with HTML. However, documentation is scarce.
  • Parcel 2.x is messy and not working.
  • Rollup worked once but needs too many hacks.
Collapse
trashhalo profile image
Stephen Solka

Parcel is best to get apps up and running quickly.
Rollup is best for libraries.
Webpack is still the queen of large frontends with complex build requirements.
Esbuild is interesting but new.

Collapse
patarapolw profile image
Pacharapol Withayasakpunt

Why bother using Rollup for libraries? Why not just Babel?

Collapse
trashhalo profile image
Stephen Solka

That's actually a really great point. I bet in most cases you could just get away with babel.

Collapse
mainendra profile image
Mainendra

Snowpack sounds promising.

Collapse
adam_cyclones profile image
Adam Crockett

It's pretty good, more of an unbundler which should perform better than a bundler on HTTP2 and upwards.

Collapse
tbroyer profile image
Thomas Broyer

I REALLY like that the entrypoint for Parcel can be your HTML page. I see html-webpack-plugin as an afterthought. I'd switch to Rollup anytime if it could use HTML as the entrypoint!

Collapse
shadowtime2000 profile image
shadowtime2000

Rollup for packages because I can export to CJS, ES, UMD, and IIFE. I use Webpack basically only in CRA where I can't customize it and I use Parcel for small projects.

Collapse
adam_cyclones profile image
Adam Crockett

Bundling is sooo, HTTP1.1 but nobody seems to have gotten the memo. πŸ˜…

Collapse
codefinity profile image
Manav Misra

ClichΓ© answer: 'Right tool for right job.'

M NS πŸ˜• about Rollup, but for 'quick' 'vanilla SPA' or very simple React, Parcel.
For most other things, Webpack.

Collapse
ndaidong profile image
Dong Nguyen

Just familiar with Rollup + Terser, but I will give esbuild a try.

Collapse
medsaad profile image
A. S. Zaghloul

Are there a good resource where I can learn how can I switch to a different bundler than the default one?

Collapse
raguay profile image
Richard Guay

Right now Rollup because it is the packager that Svelte has standardized on. But, they are talking of moving to Snowpak.

Collapse
recitomartins profile image
Collapse
puruvj profile image
PuruVJ

Snowpack. Integrates with Rollup and webpack in prod build

Collapse
kamalo__22 profile image
Ibrahim Kamal

parcel & webpack