I never need webpack or babel anymore

In the past period of time, I was refactoring our companys 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 trust, 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.