It seems like every year is a bumper year for JavaScript, and 2021 is no different. In particular, a new generation of bundlers and build tools is challenging the inertia of “good enough” tools. Improved speed, a better development experience, and higher-quality production builds are all focus areas of the new breed.
Read on for an overview of the new stable of JavaScript tools. ESM, esbuild, Parcel, pnpm, Rollup, Snowpack, and Vite are the new stars making JS development easier.
ECMAScript modules (ESM)
ECMAScript modules, aka ES modules or ESM, is the official JavaScript module syntax. As such, it is not technically a tool, but it has broad implications for JS development and tools. We’ve seen a fair amount of chaos and uncertainty in JavaScript module usage for a while (with Node.js landing on the CommonJS syntax). But with the recent approval of ESM and its general implementation in browsers, new possibilities are opening up.
The general form of ESM syntax is seen in Listing 1. The first line is the syntax for importing a default export. The second uses destructuring to specify members inside the module.
Listing 1. ESM syntax
import aModule from 'module-name';
import { moduleMember, anotherMember } from 'module-name';
Even Microsoft Edge supports ESM now, so all of the main browsers now support it.
There are two ways the browser makes use of modules: either in the JavaScript scripts it includes, or directly in the special "module" script tag, shown in Listing 2.
Listing 2. Importing via script module
<script type="module" src="https://unpkg.com/browse/react@17.0.1/"></script>
<script type="module">
import React from 'react';
</script>
<script type="module" src="../my-module.js"></script>
In Listing 2, the first two script tags show how to target an absolute URL. Notice in the first instance you use the src attribute, and in the second you execute the JavaScript import. The third script tag shows a relative import served from the same domain. Note that when you pull in a script from another domain, CORS restrictions apply.
For many years, a variety of bundlers (most commonly Webpack these days) have been used to bundle together scripts to work around browser limitations with modules. Broad browser support for ESM changes that, and the new breed of tools has been developed to take advantage of this support.
However, you’ll see that bundling still has a role to play, because allowing the browser to naively request all of the modules for an app would lead to poor performance from a multitude of requests. Bundling, minification, smart code/CSS splitting, etc. are still important for good performance.
You can see browser support for ESM here.
esbuild
esbuild is a relatively new entry in the bundler field. Like others, its claim to fame is speed. It is written in Go as opposed to JavaScript, and benefits from Go’s built-in parallelism. It also relies on smart shared memory usage during parsing and code generation.
You can get a sense of esbuild’s speed by checking the project’s benchmarks. The benchmarks show 100x and greater performance increases over other bundlers.
By default, esbuild bundles for the browser but it is also capable of bunding for Node.js. It works similarly to other build tools by tying into NPM via package.json and node_modules. It also offers a JavaScript API that you can use to roll up build commands if your needs become too complex and unwieldy for command line use. Listing 3 shows an example of using this API.
esbuild is focused on bundling, and doesn’t include a dev mode server. Some features, like code/CSS splitting, are still in the pipeline. Other tools can use esbuild for its production bundling capabilities — see Vite below.
As of May 2021, esbuild has ~25K GitHub stars, and ~570K weekly NPM downloads. This makes esbuild the smallest of the projects described here, but it is seeing a fast increase in usage, and its performance promises make it a tempting option.
Listing 3. Using the esbuild JavaScript API
require('esbuild').build({
entryPoints: ['app.jsx'],
bundle: true,
outfile: 'out.js',
}).catch(() => process.exit(1))esbuild outputs a fully self-contained bundle that incorporates your app code and all dependencies. Many plug-ins are available for handling a variety of use cases, from Svelte to PostCSS to YAML. Out of the box, esbuild supports common types like TypeScript, JSX, and JSON.
Parcel
I would be remiss if I didn’t mention Parcel, which is a tool similar in spirit to Webpack and Rollup (see below). In addition to lowering configuration overhead, Parcel claims to improve performance, although it can’t match esbuild’s claims in that respect.
Parcel includes no-config code splitting and hot module replacement (HMR) out of the box. It also incorporates many file types (like images) by default, and it can handle them without extra configuration.
Parcel has about ~38K stars on GitHub and ~64K weekly NPM downloads (weekly downloads seem to be leveling out). These stats make it a mid-sized viable option.
pnpm
pnpm is not a bundler or build tool. Instead, it is a drop-in replacement for the NPM dependency tool. This makes it similar to Yarn in purpose, but pnpm takes a different approach: It uses hardlinks to flatten the node_modules tree, thereby simplifying dependency management and avoiding duplicate dependencies. You can read more about this clever bit of engineering here.
In addition to saving disk space, this structure opens up some performance improvements, as seen in these benchmarks, which show that pnpm outperforms other package managers in most tasks.
pnpm also includes pnpx, a tool similar to npx, for executing packages.
pnpm has ~11K GitHub stars and ~191K weekly NPM downloads. It is the default package manager for SvelteKit and seeing strong growth in usage. pnpm looks to be a leading contender for the next de facto standard dependency manager.
Rollup
Rollup is a bundler that allows you to use the ESM syntax everywhere. It smooths over the various syntaxes seen in the wild (CJS, AMD, UMD, EMS, etc.) and bundles your code into a syntax that just works. In addition, Rollup delivers “tree shaking,” which is the capability of analyzing your codebase and eliminating unused imports. This has obvious performacne upsides.
Like esbuild and other bundlers, Rollup ties into package.json and node_modules via NPM.
When using Rollup, you can basically forget about module syntax and just use ESM. In general, Rollup aims to give you the experience of future JS development, where everything is unified on ESM, now.
Rollup is fairly similar to Webpack in operation, but unlike Webpack it has support for Node.js output. In addition, some developers report a simpler and smoother experience with Rollup.
Rollup does not support hot module replacement out of the box.
Rollup has an active community and a fleshed out plug-in ecosystem. As of May 2021, it has ~20K GitHub stars and ~4.8 million weekly NPM downloads.
Vite
Vite was originally a build tool specifically for Vue, but it now supports general use. It has become the official build solution for SvelteKit so is seeing increasingly broad usage.
Vite is focused on handling two requirements for JS development: running dev mode and building for production. Vite is not a bundler, and instead hands off the bundling tasks of production to Rollup.
Intended to be fast (vite means fast in French), Vite touts its fast-start dev server and hot module replacement. Experience bears out Vite’s claims — these features operate quite fast when compared to something like Webpack.
Vite’s speed improvements are based on leveraging ESM and using esbuild for prebundling. Using ESM means Vite can offload the job of bundling to the browser during development and achieve more granularity when determining which files are served during changes.
Vite currently taps Rollup for production builds (to gain features like CSS splitting) but may switch to esbuild in the future.
Vite’s dev experience is its strongest selling point — its hot module replacement is really quick. It currently has ~27K GitHub stars and ~124K weekly NPM downloads, with a strong uptick in downloads seen over the last couple months.
Snowpack
Snowpack is another bundler and dev server focused on speed. It boasts fast server start, ESM support with intelligent caching, fast hot module replacement, and low-config support of a variety of file types. Snowpack is similar in spirit to Rollup and Parcel.
Snowpack supports targeted hot module replacement for JavaScript, CSS modules, and CSS out of the box. It also boasts a strong plug-in community.
Snowpack has ~18K GitHub stars and ~55K weekly NPM downloads.
[ Also on InfoWorld: 10 tips for tuning React UI performance ]
The future of JS tools
Webpack has been a wonderful de facto standard, but it is starting to show its age. Newer tools, with the newer landscape in mind, are sure to offer better performance and an improved developer experience going forward.
JavaScript remains an exciting and rapidly evolving world to develop in. Life just keeps getting better for JavaScript developers.