Faster than webpack: JavaScript bundling with esbuild

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.

LogRocket: Debug JavaScript errors more easily by understanding the context

Debugging code is always a tedious task. But the more you understand your errors, the easier it is to fix them.

LogRocket allows you to understand these errors in new and unique ways. Our frontend monitoring solution tracks user engagement with your JavaScript frontends to give you the ability to see exactly what the user did that led to an error.

LogRocket records console logs, page load times, stack traces, slow network requests/responses with headers + bodies, browser metadata, and custom logs. Understanding the impact of your JavaScript code will never be easier!

Try it for free.