Developers need to worry about a ton of different aspects when building a new project. Which framework is the best option for the case. Which library can be integrated and help the development in the long term. Every choice can and will make an impact on the final result of the application.
You might be wondering, What do modules have to do with bundling? How are they related?
Modern bundles bring more features than simply concatenating and minifying your files into a single file. It has features such as code-splitting, auto-recompiling, source maps for debugging, etc.
It comes with great features such as:
The main goal of esbuild is to make the web faster in general. Bundlers like webpack can be very good at solving the bundling problems, but when things start to scale it brings more complexity to the code, making it hard to do some things.
To get started with esbuild, we can install it using a simple command:
yarn add esbuild
Let’s create a simple React application and see how esbuild works in practice. We’re going to install React:
yarn add react react-dom
We’re going to have a simple component that renders a “Hello World” text:
import * as React from 'react' import * as ReactDOM from 'react-dom' ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') );
Now, we’re going to tell esbuild to bundle our project:
./node_modules/.bin/esbuild app.js --bundle --outfile=out.js
We can even pass the minify parameter and bundle it for production, like this:
./node_modules/.bin/esbuild app.js --bundle --minify --outfile=out.js
The bundler outputs code for the browser by default, but in case we want we can pass a
target argument and specify the browsers that we want to support:
esbuild app.js --bundle --minify --sourcemap --target=chrome58,firefox57,safari11,edge16
esbuild can be good for Node libraries. Although a bundler, it’s not necessary when we’re working with Node, but it can beneficial for library maintainers that want to ship light and faster versions.
esbuild app.js --bundle --platform=node --target=node10.4
esbuild comes to solve the problems that these bundlers didn’t solve yet and makes the bundling process faster and creates an easy-to-use modern bundler along the way. While other bundlers take several seconds or minutes to bundle an application, esbuild takes milliseconds.
esbuild has some amazing features that can change the speed of modern applications. A good thing to point out is that esbuild is not ready for production yet.
It is a small open-source project and it’s been developed and maintained by one developer. That author said, “I don’t want to run a large open-source project, so I’m not looking for contributions now.”
Since it’s not yet production-ready, using esbuild now in production would be risky and could introduce bugs as a result. Use it at your own risk for building small projects.
Subscribe to be the first to get our expert-written articles and tutorials for developers!
All fields are required