SWC and esbuild: The End of Slow Bundling

For years, we've accepted that a large React or Vue project takes minutes to build. We've optimized Webpack, we've used babel-loader with caching, we've tried thread-loader. But the bottleneck remains: JavaScript. Compiling JavaScript using JavaScript is inherently slower than using a compiled language.

In 2021, two new players are changing the game: esbuild (written in Go) and SWC (written in Rust).

esbuild: The Performance King

esbuild is so fast it feels like a mistake. It's often 10x to 100x faster than Webpack or Rollup. It handles TypeScript and JSX out of the box.

# Example bundling a massive project
npx esbuild app.jsx --bundle --minify --sourcemap --outfile=out.js
# Time: ~0.05 seconds

The secret to esbuild's speed is its use of Go's parallelism and careful memory management. It avoids many of the GC (Garbage Collection) pauses that plague Node-based tools.

SWC: The Rust Alternative to Babel

SWC (Speedy Web Compiler) is aiming to be a drop-in replacement for Babel. It's built in Rust and powers Next.js 12.

Example .swcrc configuration:

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true
    },
    "target": "es2015"
  },
  "minify": true
}

The New Architecture: Vite and Next.js

We are seeing a massive shift in meta-frameworks. Vite uses esbuild for dependency pre-bundling and development, which is why your dev server starts in less than 300ms. Next.js has replaced Babel with SWC, cutting build times by 3x on large projects.

Transitioning

If you are starting a new project in 2021, you shouldn't be using Babel directly. Whether it's through Vite, Snowpack, or the new Next.js, your toolchain should be powered by Rust or Go.

Wait times are a choice. In 2021, we choose to build instantly.