Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
February 17, 2020 04:34 pm GMT

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:

BundlerTimeRelative slowdownAbsolute speedOutput size
esbuild0.58s1x1028 kloc/s5.83mb
rollup + terser43.56s75x14 kloc/s5.96mb
webpack47.85s83x12 kloc/s5.82mb
parcel120.45s208x5 kloc/s5.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.

my macbook

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

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To