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.
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()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"
}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();})();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))
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))
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())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!
Unlimited access to hundred of tutorials- Access to exclusive interactive lessons
- Remove ads to learn without distractions
