Battle for the Bundling time: esbuild a JavaScript bundler and minifier written on Golang
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.2sreal 77.02user 87.98sys 6.045.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.5sreal 323.92user 387.59sys 33.246.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.3sreal 82.81user 100.26sys 5.696.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.4sreal 1.47user 3.14sys 0.615.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 Shstak (article author)
P.S.
If you want more write a comment below & follow me. Thx!
Original Link: https://dev.to/koddr/battle-for-the-bundling-time-esbuild-a-javascript-bundler-and-minifier-written-on-golang-23bm
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To