Is Bun the Next Big Thing After WebPack? | by Jose Granja | Mar, 2022

bun vs. swc vs. esbuild

Picture by Writer

The way forward for JavaScript tooling is away from the JavaScript language. Instruments like Webpack and Babel are seeing their relevance diminish by the day. Why?

Languages like Rust, Go and even Zig have confirmed to be extra performant than JavaScript for the bundling, transpiling, and compiling course of. They aren’t single-threaded which is helpful when coping with a lot of recordsdata.

What could be the rationale to maintain the ecosystem tooling in JavaScript? These instruments are supposed to be executed on the developer machines and never the browser. Moreover, there isn’t any want for JS Builders to debug their internals.

The SWC was one of many earliest tooling tasks exterior of JavaScript. Shortly after, esbuild was introduced and all people was hyped about it. Each have been an actual game-changer due to their efficiency.

The Vite 2.0 mission is now utilizing esbuild behind the scenes to ship a performant constructing expertise.

Just lately, we noticed a brand new participant into the JavaScript tooling ecosystem: bun. It’s meant to make the entire JavaScript growth even quicker. It’s an all-batteries included tooling. It doesn’t simply velocity compilation and parsing however gives its personal dependency supervisor tooling and bundling.

It’s not but production-ready, however the future is wanting vivid for this instrument. On this article we’ll verify this new instrument and the place does it stand with npm, esbuild, babel, and Webpack.

As an alternative of being written in Rust or Go like its prime opponents, bun is constructed with Zig. Zig is a general-purpose programming language and toolchain for sustaining sturdy, optimum, and reusable software program.

Even when it was constructed from scratch, the builders have based mostly their strategy on the esbuild mission.

The bun instrument does help out of the field advanced options like TypeScript, CSS in Js, JSX. It nonetheless lacks some primary options like Supply Maps, Minifier, Tree-shaking, and extra.

One outstanding function is that bun has its personal node module resolver implementation. It is among the most noticeable optimizations.

Identical to Npm and Yarn create some related lock recordsdata, so will bun. It is going to create a bun.lockb. There’s a small caveat. As an alternative of producing a plain textual content file, it’s going to generate a binary one. Why is it in binary? Due to efficiency causes. We should cope with the draw back of not having the ability to examine simply the adjustments on the PRs.

The one strategy to examine this lockfile is through the command:

bun set up -y

Bun help as at this time the next loaders:

Seize from

The bun mission isn’t public but. You would need to be part of their discord here to get an invite. When you be part of it, all you have to do is navigate to their #invitations channel. There you’ll be able to request the invite via writing on the channel I need bun.

You’re going to get a one time invite for the jarred-sumner/bun repository.

To put in bun you have to execute the next instructions:

curl -fsSL up | bash# Manually add the listing to your $HOME/.bashrc (or related)

To verify that it’s all working appropriately:

bun --version

You’ll discover that it has not reached the 1.0.0 model but. As I discussed beforehand it’s nonetheless not production-ready.

Its utilization is kind of easy. In case you are aware of yarn or npm it comes just about to the identical.

To put in packages:

bun set up

Identical to yarn it’s going to use the prevailing package deal.json together with the lockfile when current.

So as to add or take away any package deal:

bun take away react
bun add preact

We will use bun as a runner:

# as an alternative of `npm run clear`
bun run clear
# if added to the `scripts` in package deal.json
bun clear

It does present some integration with the most recent React ecosystems via their create command.

Let’s create a Subsequent.js app:

bun create subsequent ./app
cd app

Let’s create a Create React App:

bun create react ./app
cd app

Easy methods to generate the bundled file?

By working bun bun ./path-to.js we generate the node_modules.bun file. It accommodates all of the imported dependencies.

You possibly can examine the contents by simply doing ./node_modules.bun > construct.js.

Let’s run a number of benchmarks to know its velocity. In fact, these are approximate measurements and can range relying on the pc. As this can be a instrument for builders, I’ve targeted on the commonest growth duties:

  • beginning the event server
  • making a change in a file
  • putting in packages
  • constructing a manufacturing distribution
  • creating a brand new internet app

For reference, my laptop computer is rocking an AMD Raizen 7 with 16GB and I’m utilizing Ubuntu 20.04.

I’ve used a utility that generates random jsx recordsdata. You possibly can verify here. I’ve generated a set of 21 random jsx recordsdata that I’ve included in all of the created take a look at tasks.

1. Bun vs. Babel

This isn’t actually a good combat but it surely highlights how briskly this instrument is in comparison with what was used historically.

bun vs. babel for transpiling React recordsdata

2. Making a Create-React app

We will see a noticeable distinction between making a Create React App via bun or webpack + npm. By utilizing the previous there’s barely any delay, it takes solely 4.4s to get you all arrange.

bun vs webpack on CRA chart
bun vs. webpack for making a CRA

3. Making a Subsequent.js app

The earlier astonishing outcomes should not that spectacular. We’re used to instruments beating up Webpack. Let’s put up a good combat. Let’s now examine bun with Subsequent.js which makes use of internally swc.

bun vs. swc for Subsequent.js framework

The variations between each are very noticeable. Particularly the distinction in processing a file change. On my laptop computer, it takes solely 10ms for bun whereas it takes over 70ms for SWC.

4. Bundle Supervisor

Within the module set up and manipulation is the place bun makes some floor. The opposite instruments are counting on npm or yarn to get the job executed. Its efficiency is round 4x — 100x occasions quicker than npm.

We already noticed the large distinction within the 2. Create React App step. Nevertheless, let’s do a extra primary instance now. Let’s create a package deal.json file with the next dependencies:

  • date-fns@2.28.0 — 89.5 kB
  • jspdf@2.5.1 — 339.1kB
  • react@17.0.2 — 6.9 kB

Then we are able to benchmark the way it performs on first set up and cached installs. I selected one heavy library like jspdf to make the distinction extra noticeable.

bun vs npm putting in packages

The time distinction is noticeable. It’s 4x quicker when utilizing the community and far more when packages are resolved from the cache.

5. Vite vs. bun

The esbuild is the actual competitor or bun. For this take a look at, I’ve used Vite which has esbuild internally.

bun vs. vite on the event server

I’ve used the identical code as above to generate the bundles for the three main opponents. It’s value remembering that bun isn’t really useful for manufacturing because it nonetheless lacks fairly a number of options. As spectacular because the outcomes are it’s to take with a grain of salt.

As nicely observe that the max construct time is 5 secs within the worst situation. It’s not unreasonable, the three instruments do an superior job right here.

bun, vite, and swc on constructing a manufacturing bundle

The JavaScript tooling has by no means regarded any higher. Even when this instrument isn’t but production-ready it’s superior to see new opponents. The way forward for Webpack is unclear and it has many opponents within the JavaScript house and outdoors of it.

The bun instrument isn’t an all-around instrument. It has been constructed with a selected use case: constructing web sites and webapps. To construct libraries, the bun staff recommends esbuild and even Rollup.

These days, the main target continues to be not on manufacturing. It’s targeted on growth and compatibility with present frameworks and toolings.

More Posts