DEV Community

Cover image for JavaScript Bundlers: An in-depth comparative 👍👎 Is Webpack still the best bundler in 2021? 📦

JavaScript Bundlers: An in-depth comparative 👍👎 Is Webpack still the best bundler in 2021? 📦

_CODE on July 09, 2021

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...
Collapse
 
aantipov profile image
Alexey Antipov

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...

Collapse
 
davipon profile image
David Peng

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.

Collapse
 
underscorecode profile image
_CODE

Thanks for your feedback!

Collapse
 
sambitsahoojs profile image
sambit sahoo

Use vite. Problem solved.

Collapse
 
sambitsahoojs profile image
sambit sahoo

Fast like really fast , built on top of esbuild, extremely diverse plugin system. Good typed APIs. Really good

Collapse
 
underscorecode profile image
_CODE

Good reasons to give Vite a try. Thanks for your comment!

Thread Thread
 
sambitsahoojs profile image
sambit sahoo

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

Collapse
 
jloa profile image
Julius

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 😒

Collapse
 
underscorecode profile image
_CODE

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!

Collapse
 
the_riz profile image
Rich Winter

Yeah... Among the cool kids Vite is the new hotness. Def should add to the above. Maybe snowpack too?

Collapse
 
synergy profile image
Theo

How about snowpack?

Collapse
 
underscorecode profile image
_CODE

It was next on the list 👌 And it'll be in the next comparative for sure! Thanks for your suggestion.

Collapse
 
heyprotagonist profile image
Anguram Shanmugam

you can learn usage is not now. I think if we use with deno it's the awesome bundler.

Collapse
 
tjunghans profile image
Thomas Junghans

"Update (April 20, 2022): Snowpack is no longer actively maintained and is not recommended for new projects." Source

Collapse
 
peerreynders profile image
peerreynders

There is the tooling report from April 2021.

Collapse
 
michaelcurrin profile image
Michael Currin • Edited

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...

Collapse
 
pabloabc profile image
Pablo Berganza

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.

Collapse
 
underscorecode profile image
_CODE

I'll be definitely trying Vite soon since I only read good reviews about it. Thanks for your suggestion!

Collapse
 
aderchox profile image
aderchox

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. 💪

Collapse
 
iamwilson profile image
John Wilson

Great technical analysis. Keep at it ;)

Collapse
 
mlippert profile image
Mike Lippert • Edited

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.

Collapse
 
bombxdev profile image
bombxdev

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.

Collapse
 
andreidimitrov profile image
Andrei Dimitrov

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.

Collapse
 
underscorecode profile image
_CODE

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.

Collapse
 
jry25 profile image
Jérémy Richard

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.

Collapse
 
underscorecode profile image
_CODE

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.

Collapse
 
jry25 profile image
Jérémy Richard

Thank you very much that is a clear answer.

Collapse
 
stevekaufman profile image
Steven Kaufman

This article is really interesting don't you think

Collapse
 
omaryousifkamal profile image
Omar Yosuif

thank you very much.

Collapse
 
omaryousifkamal profile image
Omar Yosuif

thank you!

Collapse
 
sirseanofloxley profile image
Sean Allin Newell

Would've liked to see emitted bundle size comparisons or CI build time comparisons.

Collapse
 
underscorecode profile image
_CODE

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.