I never need webpack or babel anymore

In the past period of time, I was refactoring our company’s miniapp compiler, Its performance has increased by more than ten times.

Use Esbuild

Replace webpack or rollup

What's interesting, using esbuild and webpack are almost the same.

webpack node api

const webpack = require('webpack')

webpack({
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
  }
}).run((err, stats) => {
})

esbuild node api

const esbuild = require('esbuild')

await esbuild.build({
  entryPoints: [path.join(cwd, 'src', 'app.js')],
  outdir: path.join(cwd, 'dist'),
  bundle: true
})

They are no different in use, but esbuild is much faster than webpack.

In most places where you use webpack, you can use esbuild instead.

Replace jest

In my open source framework fre, I use playwright + zora + esbuild as the test toolkits, and its experience is very smooth.

https://github.com/yisar/fre/tree/master/test

before:
puppeteer + jest 30s+

after:
playwright + zora + esbuild 3s-

Replace terser

https://github.com/privatenumber/minification-benchmarks

Using esbuild as a compressor for large projects can improve a lot of performance.

Replace next.js

We have a new alternative within our company, which uses esbuild throughout the toolchain, and the development experience is much better than next.js.

Disadvantages of esbuild

• AST operation is not supported
• Generating d.ts is not supported
• No go API provided
• The generated runtime code is dirty

After we use esbuild in depth, we find it has many disadvantages, so it is impossible to use esbuild alone.

Some people use rollup, such as the vite team, but I don't think it's worth it.

Use Swc

This is another tool written using rust, which can make up for some shortcomings of esbuild.

Replace babel

A common practice is to modify AST in rust side, and then pass the results to node side through wasm.

https://github.com/parcel-bundler/parcel/blob/v2/packages/transformers/js/core/src/hoist.rs

For example, that's what parcel v2 does.

Summary

Most of the time, esbuild is enough. swc can be used when the AST needs to be modified, but anyway, I don't need webpack or babel anymore.

More and more similar tools will appear in the front-end tool chain in the future. They are written in go or rust, and they are very fast and smooth.

I love this change very much.

Comments

[JoelBonetR 🥇]

I usually use Parcel Bundler instead webpack as it handles all out of the box, this way I avoid loosing time in configs and get a better experience while getting a faster build and a bit lighter output.

What can ESBuild offer on the top of that?

[Yisar]

esbuild is more suitable as a common tool for building our own toolchain. For web applications, Parcel does a good job, but many projects are not web applications, such as react-native and miniapps. They also need a whole toolchain. , But they have little to do with web, I use esbuild to make the toolchain faster and smooth.

[JoelBonetR 🥇]

perfect! thanks for the clarification as I'm always developing on web :D

[Peter Todd]

Also IIRC Parcel adds several hundred mb of dependencies and isn't particularly fast. Downside of esbuild includes lack of HMR (or whatever they're calling it this month). I'm using Vite at the moment and am fairly happy with it I think.

[kellas]

For web you can create simple build script , for compile scss , watch and copy static files.
Build very fast! Not more wait minutes when CI CD pipelines finish.

For example, config one of latest project github.com/CryptoPhilately/nfthack...

[Yisar]

good job, I like this simple script, it's very clean and easy to maintain.