Introduction
In this crazy world, it has become so difficult to secure leadership in at least one discipline. And now, a new battle has already begun: the speed of assembly of bundle — a measure to determine the best JavaScript bundler...
Hello, friend! And let the battle begins! ✊
📝 Table of contents
Bundlers versions
Unfortunately, esbuild
has no versions in repository, so I can't refer to a specific build of it. But, I'll use info from package.json
file (17 Feb 2020):
{
"private": true,
"devDependencies": {
"js-yaml": "3.13.1",
"parcel": "1.12.4", // -> latest 1.x version
"rollup": "1.20.3", // -> not latest version
"rollup-plugin-terser": "5.1.3", // -> not latest version
"webpack": "4.39.3", // -> not latest version
"webpack-cli": "3.3.7"
}
}
Official benchmark results
[...] benchmark approximates a large codebase by duplicating the three.js library 10 times and building a single bundle from scratch, without any caches. [...] esbuild is 10-100x faster than the other JavaScript bundlers I tested (webpack, rollup, and parcel) [...]
Authors run benchmark on 6-core 2019 MacBook Pro with 16gb of RAM. This table show official results from README:
Bundler | Time | Relative slowdown | Absolute speed | Output size |
---|---|---|---|---|
esbuild | 0.58s | 1x | 1028 kloc/s | 5.83mb |
rollup + terser | 43.56s | 75x | 14 kloc/s | 5.96mb |
webpack | 47.85s | 83x | 12 kloc/s | 5.82mb |
parcel | 120.45s | 208x | 5 kloc/s | 5.90mb |
Impressive, isn't it? Yeah, me too. But I was taught not to believe the word numbers on the Internet (especially when it comes about JavaScript).
My own benchmark results
So, I decided to double-check everything on my work computer: 4-core 2015 MacBook Pro with 8gb of RAM.
OK! Let's git clone
and run make bench-three
from root folder:
$ git clone https://github.com/evanw/esbuild.git
$ cd esbuild
$ make bench-three
Rollup.js
[...] used the
rollup-plugin-terser
plugin because rollup itself doesn't support minification.
Done in 1m 15.2s
real 77.02
user 87.98
sys 6.04
5.8M bench/three/rollup/entry.rollup.js
19M bench/three/rollup/entry.rollup.js.map
Hmm... 🤔 it was a strange result! IDK what's wrong, because I saw this result (±10s) each time on my MacBook Pro. But, okay. Let's see next bundler.
Parcel
[...] Parcel uses the default options.
Done in 322.5s
real 323.92
user 387.59
sys 33.24
6.8M bench/three/parcel/entry.parcel.js
20M bench/three/parcel/entry.parcel.js.map
I often use Parcel on small projects without React.js or other frameworks. I know that it's not fastest, so this result didn't surprise me much.
Webpack
[...] Webpack uses
--mode=production --devtool=sourcemap
.
Done in 81.3s
real 82.81
user 100.26
sys 5.69
6.0M bench/three/webpack/entry.webpack.js
19M bench/three/webpack/entry.webpack.js.map
Perhaps this is the most interesting result (for me) of the Big three bundlers! I'd never have thought, that Webpack could do this job better than Rollup... 🤯
esbuild
[...] running esbuild with
--bundle --minify --sourcemap
.
Done in 1.4s
real 1.47
user 3.14
sys 0.61
5.8M bench/three/esbuild/entry.esbuild.js
17M bench/three/esbuild/entry.esbuild.js.map
Yeah, I'm shocked, too. How can that be? Actually, it's simple Go magic! ✨
- It's written in Go, a language that compiles to native code
- Parsing, printing, and source map generation are all fully parallelized
- Everything is done in very few passes without expensive data transformations
- Code is written with speed in mind, and tries to avoid unnecessary allocations
Photo by
[Title] esbuild authors https://github.com/evanw/esbuild
[1] Vic Shóstak (article author)
P.S.
If you want more articles (like this) on this blog, then post a comment below and subscribe to me. Thanks! 😻
❗️ You can support me on Boosty, both on a permanent and on a one-time basis. All proceeds from this way will go to support my OSS projects and will energize me to create new products and articles for the community.
And of course, you can help me make developers' lives even better! Just connect to one of my projects as a contributor. It's easy!
My main projects that need your help (and stars) 👇
- 🔥 gowebly: A next-generation CLI tool that makes it easy to create amazing web applications with Go on the backend, using htmx, hyperscript or Alpine.js and the most popular CSS frameworks on the frontend.
- ✨ create-go-app: Create a new production-ready project with Go backend, frontend and deploy automation by running one CLI command.
Top comments (1)
We just tested esbuild . It's fast, but they should add some plugins api like rollup.