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:
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
by Manfred Steyer (SOFTWAREarchitekt.at)
by Andrey Goncharov (Hazelcast)
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.
The post Experimental JavaScript bundler and minifier uses Go for speed appeared first on JAXenter.