tools.esbuild

  • Type: Object
  • Default: undefined
WARNING

The esbuild feature in the current document is no longer maintained, we recommend using the Rspack + SWC solution, because Rspack + SWC provide better build performance, richer features, and better compatibility.

Please refer to 「Use Rspack」 for more information.

Introduction

esbuild is a front-end build tool based on Golang. It has the functions of bundling, compiling and minimizing JavaScript code. Compared with traditional tools, the performance is significantly improved. When minimizing code, compared to webpack's built-in terser minimizer, esbuild has dozens of times better performance.

Modern.js Builder provides esbuild plugin that allow you to use esbuild instead of babel-loader, ts-loader and terser for transformation and minification process. When you enable esbuild in a large project, it can greatly reduce the time required for code compilation and compression, while effectively avoiding OOM (heap out of memory) problems.

Configuration

You can set the esbuild compilation behavior through the tools.esbuild config.

modern.config.ts
import { defineConfig } from '@modern-js/app-tools';

export default defineConfig({
  tools: {
    esbuild: {
      loader: {
        target: 'chrome61',
      },
      minimize: {
        target: 'chrome61',
      },
    },
  },
});

For config details, please refer to Modern.js Builder - Esbuild Plugin Configuration.