Ibrahima Ndaw JavaScript enthusiast, full-stack developer, and blogger who also dabbles in UI/UX design.

Faster than webpack: JavaScript bundling with esbuild

2 min read 561

Fast 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.

Benchmark Comparison of JavaScript Bundlers

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:

We made a custom demo for .
No really. Click here to check it out.

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.

You come here a lot! We hope you enjoy the LogRocket blog. Could you fill out a survey about what you want us to write about?

    Which of these topics are you most interested in?
    ReactVueAngularNew frameworks
    Do you spend a lot of time reproducing errors in your apps?
    YesNo
    Which, if any, do you think would help you reproduce errors more effectively?
    A solution to see exactly what a user did to trigger an errorProactive monitoring which automatically surfaces issuesHaving a support team triage issues more efficiently
    Thanks! Interested to hear how LogRocket can improve your bug fixing processes? Leave your email:

    : Debug JavaScript errors easier 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 find out exactly what the user did that led to an error.

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

    .
    Ibrahima Ndaw JavaScript enthusiast, full-stack developer, and blogger who also dabbles in UI/UX design.

    Leave a Reply