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.
Thanks for sharing! š This speed graph from their GitHub repo caught my attention š
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.
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.
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!
Snowpack sounds promising.
It's pretty good, more of an unbundler which should perform better than a bundler on HTTP2 and upwards.
Just familiar with Rollup + Terser, but I will give esbuild a try.
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
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.