How to Quickly Set Up ESBuild

ESBuild, the extremely fast JavaScript bundler was written by Evan Wallace in Go, and first revealed in 2020. On it's official homepage, ESBuild mentions that the current frontend build tools are 10-100x slower than they could be. And ESBuild tries to break this chain by significantly speeding up build processes. But is it so?

Why ESbuild is so fast?

There is more than one reason for ESBuild's fast speed. It's entirely written from scratch in Go and compiles to native code. Go heavily uses parallelism and can share memory between threads which makes it a better fit for performance compared to JavaScript (which many bundlers are written in).

It's also important to mention that writing it from scratch allowed performance optimizations right from the very start, which may not be the top priority for other libraries. This also means a consistent data structure which means there is no need for expensive conversions which slow things down even more.

These are some of the reasons ESBuild is able to outperform other bundlers. Does that mean that ESBuild is faster than most build tools, eg. Webpack? — Yes, due to the nature of how ESBuild was written (and the fact that it was written in Go), means it is faster than Webpack or other JavaScript-based bundlers.

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
JavaScript Course

How do I Set Up ESBuild?

Let's see how you can actually set up ESBuild to use it in your project. First, you will need to add esbuild as a dependency to your project by running the following in your terminal:

npm i esbuild

Now we can use the esbuild command in our package.json file to bundle the app with an entry file. Let's say you have an app.js file at the root of your project that acts as an entry file, with the following code:

const app = {
  greet() {
    console.log('Hello 👋')
  }
}

app.greet()
app.js
Copied to clipboard!

To bundle the code for production using ESBuild, we can add the following build script to our package.json file:

"scripts": {
    "build": "esbuild app.js --bundle --minify --outfile=bundle.js"
}
package.json
Copied to clipboard!

This will generate a bundle.js file next to app.js which will be minified and transpiled down to a lower version for better compatibility.

(()=>{var e={greet(){console.log("Hello \u{1F44B}")}};e.greet();})();
bundle.jsThe generated bundle file
Copied to clipboard!

Of course, keeping track of the build script this way quickly becomes hard to manage due to the number of options, and any additional logic if needed.

Because of this, we can also use the ESBuild's API to create a build.js script file and define everything inside it. The above command would translate to the following:

require('esbuild').build({
    entryPoints: ['app.js'],
    outfile: 'bundle.js',
    bundle: true,
    minify: true
}).catch(() => process.exit(1))
build.js
Copied to clipboard!

Make sure you include a catch clause to ensure that when the process exits with an error, it is reported. Notice that you can define multiple entry points in case you need multiple separate files to be generated.


How to Use ESBuild with React

A more common use case however is using ESBuild with a popular UI library, such as React. The only thing we need to change to make it work is to point the entry file to the necessary React entry point, and ESBuild will do the rest.

require('esbuild').build({
    entryPoints: ['app.jsx'],
    outfile: 'bundle.js',
    bundle: true,
    minify: true
}).catch(() => process.exit(1))
build.jsPoint your entry file to your React app and ESBuild will do the rest
Copied to clipboard!

How to Compile TypeScript in ESBuild

ESBuild is also capable of handling TypeScript out of the box. This means that in order to use TypeScript, you only need to rename your files to either .ts or .tsx, depending on your setup, and you are good to go.

const app = {
  greet(): string {
    return 'Hello 👋'
  }
}

console.log(app.greet())
app.jsDon't forget to also update your entry file in your build script
Copied to clipboard!

Conclusion

Should I use ESBuild? Is it ready for a production build? As of now, ESBuild is still below version 1.0, which means it currently lacks a stable version. This makes it risky to use it in a production environment, as there could easily be breaking changes in it's API.

So if you are looking to try out ESBuild on your own, there is nothing spotting you, but don't use it in production environments just yet. If you are looking for more throughout documentation, make sure you check out the official docs.

Do you already have experience with using ESBuild? Let us know in the comments below! Thank you for reading through, happy coding!

JavaScript Course Dashboard

Tired of looking for tutorials?

You are not alone. Webtips has more than 400 tutorials which would take roughly 75 hours to read.

Check out our interactive course to master JavaScript in 5 hours.

Learn More

📚 Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕

Get access Support us
Read more on
🎉 Thank you for subscribing to our newsletter. x