days
0
-38
-4
hours
0
-5
minutes
-5
-2
seconds
-2
-1
search
Pack it up, pack it in

Experimental JavaScript bundler and minifier uses Go for speed

Sarah Schlothauer
© Shutterstock / Maxx studio

JavaScript bundling can take a long time, but does it have to be that way? Created as a hobby project, esbuild shows that JS bundling does not have to be so slow. Let’s take a look at this project, how its benchmark results compare, see how it works, as well as check up on webpack and what is on the agenda for the long-awaited arrival of Webpack 5.

JavaScript bundling involves separating files to reduce the number and size of server requests that are needed to load a web page. There are a number of build tools for JavaScript out there. Between webpack, Gulp, and parcel, the ecosystem is packed with choices.

A new JS bundler and minifier is available as an experimental hobby project, but there’s something a little different about esbuild. With the help of Golang, it’s much faster than the rest.

Let’s take a quick tour of this JS tool as well a look forward to what’s on the agenda for webpack.

SEE ALSO: Mint programming language is an alternative to JavaScript for writing single page apps

Speedy performance

According to benchmarks, esbuild is 10 to 100 times faster than other commonly used JavaScript bundlers including webpack, rollup, and parcel, with roughly the same output size. (Test out the benchmark using make bench-three.)

Let the numbers speak for themselves:

javascript

Benchmarks for esbuild. Source.

The key to esbuild’s speed lies in its language of choice; it is written in Go. Since Go is such a speedy language, it allows this bundler to take advantage of that and avoids slowdown.

According to its README, it currently supports:

  • CommonJS modules
  • ES6 modules
  • Bundling with static binding of ES6 modules using --bundle
  • Full minification with --minify (whitespace, identifiers, and mangling)
  • Full source map support when --sourcemap is enabled
  • JSX-to-JavaScript conversion for .jsx files
  • Compile-time identifier substitutions via --define
  • Path substitution using the browser field in package.json
  • Automatic detection of baseUrl in tsconfig.json

Test it out

As a word of caution, this bundler should not be used in production and has not been tested in a production environment. The creator states it is a hobby project created during winter break. Thus, it includes potential bugs and all the associated risks of new code and experimental projects.

However, feel free to give it a try, if only as an experiment to see how quick JS tooling can potentially be.

View the installation guide on GitHub and how to use the command-line interface.

SEE ALSO: How Curve is getting ahead with Golang

Looking towards webpack 5

Despite its relatively sluggish performance, webpack is generally the most commonly used bundler for JavaScript apps, especially in production and was one of the top JS tools listed in the State of JavaScript 2019 developer survey. It is a module bundler that bundles up JavaScript files for usage in a browser, creating bundle.js and boasts a customizable plugin interface with a large ecosystem.

Webpack 5 is on its way and will contain some new experimental features. The start of an article series by Sergey Melyukov will break down what to expect in v5. Read the first entry and explore asset modules.

As of right now, there is no set release date for webpack 5, as it is currently in beta phase and collecting user feedback. All of the major changes and features are complete with this version. So now, all that’s left is achieving better stability and further tests.

View the changelog for more information about the upcoming new features.

Author
Sarah Schlothauer

Sarah Schlothauer

All Posts by Sarah Schlothauer

Sarah Schlothauer is an assistant editor for JAXenter.com. She received her Bachelor's degree from Monmouth University and is currently enrolled at Goethe University in Frankfurt, Germany where she is working on her Masters. She lives in Frankfurt with her husband and cat. She is also the editor for Conditio Humana, an online magazine about ethics, AI, and technology.

guest
0 Comments
Inline Feedbacks
View all comments