esbuild

By default, this project use Babel to transpile JS code.

For better performance, we can switch to esbuild

Something you should know

From ESbuld doc https://esbuild.github.io/content-types/#es5

Transforming ES6+ syntax to ES5 is not supported yet. However, if you're using esbuild to transform ES5 code, you should still set the target to es5. This prevents esbuild from introducing ES6 syntax into your ES5 code.

So if your project still need to support some old browser, Babel is still better option for you.

Install

$ cd frontend
$ npm install -D esbuild-loader

Next, let's change Webpack config to use esbuild-loader to process our JS files

Edit webpack.config.dev.js and webpack.config.watch.js

{
  test: /\.js$/,
  include: Path.resolve(__dirname, "../src"),
  loader: "esbuild-loader",             // replace loader for the js files
  options: {                            // we can pass options as we like
    target: ['es2015']
  }
},

Edit webpack.config.prod.js

{
  test: /\.js$/,
  include: Path.resolve(__dirname, "../src"),
  loader: "esbuild-loader",
  options: {                            // we can pass options as we like
    target: ['es2015']
  }
},

That is it, now you can run npm run start or npm run build to compile frontend assets.

esbuild

Something you should know

Install

Reference