Hello, everybody! 🚀
For the last few days, I've been doing some research on the currently available JavaScript bundlers to try to draw my own conc...
For further actions, you may consider blocking this person and/or reporting abuse
I suggest taking a look at Moiva.io (I'm the author) to compare the libraries using different metrics moiva.io/?npm=rollup+snowpack+vite...
Great article!
I think Parcel would be a good choice after beta 3.
They use swc, a JavaScript compiler written in Rust to replace Babel, it really saves my day to deal with Typescript + Jest + ES Modules.
It's a huge pain to configure in Babel.
Thanks for your feedback!
Use vite. Problem solved.
Fast like really fast , built on top of esbuild, extremely diverse plugin system. Good typed APIs. Really good
Good reasons to give Vite a try. Thanks for your comment!
It's really good that you didn't mention vite in this article as vite is not a bundler. It's a build tool and I'd love to see another informative article after you try vite. Thanks
On spa projects I personally prefer es-based bundlers (I use vitejs). But if the project is large and non-monorepo -- webpack. More options, more plugins. And the killer feature -- module federation.
So webpack still dominating, despite the fact that it bundles projects as slow as a snail 😒
I've heard good about Vite, so I guess it won't be long until I try it out. And I think the same about Webpack, still the best for large (and many times overloaded) projects.
Thanks for your comment!
Yeah... Among the cool kids Vite is the new hotness. Def should add to the above. Maybe snowpack too?
How about snowpack?
It was next on the list 👌 And it'll be in the next comparative for sure! Thanks for your suggestion.
you can learn usage is not now. I think if we use with deno it's the awesome bundler.
"Update (April 20, 2022): Snowpack is no longer actively maintained and is not recommended for new projects." Source
There is the tooling report from April 2021.
webpack is deeply embedded in the React and Vue ecosystems so it's not going anywhere.
That said when Google DevRels shy away from writing plugins for webpack one has to wonder (i.e. if you need to write you own plugins Rollup may be the better choice).
microbundle by Jason Miller is based on Rollup and he has worked with webpack extensively!
Apart form the sheer speed there are other reasons to keep an eye on esbuild (though a proliferation of JavaScript rather than Go plugins might kill it's speed);
Not sure what's going on with Packem. Given Rust's position in the WebAssembly space (minimal runtime size, similar to C) it may be a good companion language for the tooling ecosystem (swc; Writing JavaScript tools in other languages – a new trend?).
This could be nice as a post series grouped under a title, as it's currently hard to jump to sections.
I have quickstarts here comparing a few options including working with TS and React where a bundler/transposer is necessary
github.com/MichaelCurrin/javascrip...
I'm a fan of esbuild as well as it is supposed to be several times faster then alternatives, it supports esmodules i.e.
import from ...and it is zero config so you can use it from the command line for any project.npx esbuild ...michaelcurrin.github.io/dev-cheats...
I’ve found the development flow is really really good with Vite. I’ve been using it with SvelteKit and it makes me wish other frameworks grab it by default as well.
I'll be definitely trying Vite soon since I only read good reviews about it. Thanks for your suggestion!
So much I love this summary and style of writing giving POV and yet putting things in a table at the end and separating pros and cons, this is cool style of writing and pretty helpful. Thanks a lot for the time. 💪
Great technical analysis. Keep at it ;)
This was a great article, and I really appreciate you posting it, thanks!
You covered enough functionality to get a good idea about each bundler, and you stated your biases up front even as you did a good job of trying to set them aside for the review.
I'm just about to set up a new project and thought I'd see if rollup was worth exploring (over webpack). The one thing I'm most interested besides what you covered is how easy it is to use typescript sources.
Thanks for this article, I'm curious about esbuild will be the next trend or not cause of using by Vite (Next Generation Frontend Tooling) for pre-bundles and as we know, esbuild written in Go that take effect 10-100x faster than JavaScript-based bundlers.
The part about Rollup looks way too optimistic. In real life you need a lot of configuration to allow Rollup work with CJS modules.
For example, when working with React you have to manually declare every imported name in configuration file. That's not super convenient.
So good to know. I've tried Rollup with a very simple example, just to start off with it, but I guess trouble comes with more complex scenarios. Thanks for pointing that out.
Great comparison. Do you by any chance know which are the ones dealing nicely with code splitting?
I'm afraid to move away from webpack and lack this functionality.
It seems like Webpack and Browserify are still the best in handling code splitting, but Parcel and Rollup are able to handle it as well. As for ESBuild, this feature is still in progress.
Thank you very much that is a clear answer.
This article is really interesting don't you think
thank you very much.
thank you!
Would've liked to see emitted bundle size comparisons or CI build time comparisons.
The value you can see in the comparison table is the size of the project after the bundle has been generated (maybe I should've specified it better). About the bundle times, you're right, I totally forgot that when creating the table 😅 Thanks for your feedback.