Written by Ibrahima Ndaw✏️

Modular programming is a software design technique whereby a program’s various functions are subdivided into code modules that are developed separately. Modern programming relies heavily on modularity, which is why you need a module bundler to merge all separate files into a single one.

There are a few bundlers available in the JavaScript community, such as WebPack, Rollup, and Parcel. However, these are not fast enough because they are built with JavaScript, which, as well all know, leaves much to be desired in terms of performance. Fortunately, there is a new bundler built with Go that works faster than other bundlers.

In this guide, we’ll explore esbuild, a JavaScript bundler and minifier that packages JS code for distribution on the web. We’ll examine how it’s able to work so fast and discuss why you should keep an eye on this tool in 2020 and beyond.

What is esbuild, and why is it so fast?

esbuild is a JavaScript bundler created by Evan Wallace. The code itself is written in Go with speed in mind, and it’s clear that the developer endeavored to avoid unnecessary allocations as much as possible.

Comparing esbuild to other bundlers (Benchmark)

esbuild fully parallelizes parsing, printing, and source map generation. All these features combine to make esbuild extremely fast. That said, to help you choose the best bundler for your next JavaScript project, let’s compare esbuild to other tools on the market.

To benchmark these bundlers, I’ll use the same criteria Wallace published to his GitHub repo. These figures may vary somewhat depending on the computer, but not by much.

The use case here is to duplicate the Three.js library 10 times and bundle it into one single file without any caches. The tests were done on a six-core 2019 MacBook Pro with 16gb of RAM.

The result of the benchmarking is mind-blowing: esbuild is 10 to 100 times faster than other bundlers, thanks to the Go language.

By the way, you can run this benchmark on your machine and see it for yourself. Install the Go language toolchain and run the following command:

make bench-three

Is esbuild production-ready?

There’s no disputing this bundler’s speed. But is it production-ready?

For now, esbuild is a small open-source project; it’s developed and maintained by one man. This is largely by design. Per the author: “I don’t personally want to run a large open-source project, so I’m not looking for contributions at this time.”

Although this will inevitably slow the development of the tool, it’s already a great bundler with robust support for common JS modules, JSX-to-JavaScript conversion, etc. However, it has yet to be used in production; doing so right now would be risky and would likely unearth some bugs.

That said, esbuild has tremendous potential to streamline the traditionally sluggish task of bundling modules in JavaScript, and it’s worth trying out in your next project.

Conclusion

If nothing else, esbuild is proof that our current JavaScript build tools are not fast enough. Given that the gap between esbuild and other bundlers is so wide in terms of performance, I hope this tool will help improve build tools in general across the JS ecosystem.

Even if esbuild is not yet production-ready, it’s something to keep an eye on. I highly recommend checking out the Github repo to dive deeper into the documentation.

Plug: LogRocket, a DVR for web apps

 

 
LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
 
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
 
Try it for free.

The post Fast JavaScript bundling with esbuild appeared first on LogRocket Blog.