If you’re building any kind of frontend app with multiple source files and dependencies, you’re going to need a build tool to help you solve the problem ofbundling — putting all of the source files and dependencies together into a form the browser can understand.
- resolution — find where various source components live on disk.
- serving — serve the content to browsers in development mode, including features like “hot” reloading
Note that not all tools do all of these steps or do them in exactly the same way, but these are some of the core problems that most build tools solve in one way or another.
What’s Wrong With Webpack
Instead of pre-processing and bundling up all of a project’s modules into a single JS file, Vite lets the browser request the imports itself. All Vite has to do is resolve the imports, and if necessary, translate them to ES6 modules. This massively accelerates the speed to reload our code after we make changes in development.
When it comes time to deploy to production, we still do need to bundle our code, so Vite does provide this functionality, though it makes use of other tools under the hood, including Esbuild, which we’ll cover below.
I got Vite up and running very easily on a new project, though I did run into some troubles when trying to port over an existing Webpack project, due to more complicated configuration and dependencies.
When to use it:
✅ You want to prioritize lightning fast reloads in development
✅ On a new project, or an existing project without complicated configuration
Parcel is a bundler that stands out for its zero configuration approach. It’s a breeze to setup and use on a new project with little to no configuration required. Simply start with your project entry point, typically an HTML file, and any assets that are included are bundled up and served appropriately. It supports a large number of languages and configurations right out of the box.
In spite of its simplicity, it is also quite powerful and flexible, supporting a number of advanced bundling options with little to no configuration, but also featuring an extensible plugin system. It is also much faster than Webpack, though not as fast as Esbuild, which we discuss below.
When to use it:
✅ You want a faster and much simpler bundler than Webpack
✅ You want to take advantage of some advanced features without heavy configuration
Esbuild also takes a traditional bundling approach, but is simply lightning fast. Written in
Though Esbuild is incredibly fast, there are a couple of features missing from other buildlers that may make it challenging to use in production for some projects. For example, Esbuild does not have as extensive built-in language and framework support as some of the other build tools (though in many cases 3rd party developers have built solutions).
Additionally, unlike some of the other solutions, it’s a build-only tool that does not have a development server built-in. Setting up a separate development server is easy enough, but it is an extra step with Esbuild and may not offer the same level of integration.
I’ve been using Esbuild since it became the default bundler in the Phoenix Framework a couple of releases ago and am very happy with it. This configuration works especially well since Phoenix takes care of the server aspect, and the setup is mostly the same between development and production
When to choose Esbuild:
✅ You want a traditional bundling approach, but want it to be lightning fast
✅ You are okay setting up your own dev server (or are using one already, as is the case with a framework like Phoenix).
✅ You’re sure your particular languages/frameworks are supported — you’re okay with some of the “missing” features of Esbuild