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?
Top comments (23)
esbuild is the future, now.
My favorite is actually Webpack, as it is the most reliable and customizable.
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.
Thanks for sharing! 😉 This speed graph from their GitHub repo caught my attention 👀
ooooooh esbuild looks pretty cool / fast!
do you advice it for both libs and apps?
any tutorial to recommend?
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.
Thanks for the feedback!
Good to know, I might give it a try or at least keep a good eye on it 😉
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.
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.
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.
Why bother using Rollup for libraries? Why not just Babel?
That's actually a really great point. I bet in most cases you could just get away with babel.
Snowpack sounds promising.
It's pretty good, more of an unbundler which should perform better than a bundler on HTTP2 and upwards.
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!
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.
Bundling is sooo, HTTP1.1 but nobody seems to have gotten the memo. 😅
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.
Just familiar with Rollup + Terser, but I will give esbuild a try.
Are there a good resource where I can learn how can I switch to a different bundler than the default one?
Right now Rollup because it is the packager that Svelte has standardized on. But, they are talking of moving to Snowpak.
Parcel.
Snowpack. Integrates with Rollup and webpack in prod build
parcel & webpack