Boost Build Speed in Umi 4 with esbuild: Faster JS/CSS Minification & Caching

esbuild

Although there is no silver bullet for build acceleration, esbuild serves as a powerful tool during this period.

In Umi 4, the default JavaScript minifier switches from terser to esbuild. Compared with terser, esbuild is faster and eliminates OOM issues caused by compression, though the output size may increase by about 10%. The minifier can also be configured to use terser, uglifyJs, or swc for different scenarios, such as using uglifyJs to deliberately fail on unsupported ES6 syntax.

export default {
  jsMinifier: 'uglifyJs',
  jsMinifierOptions: {},
}

For CSS, the default compressor changes from cssnano to esbuild as well. esbuild compresses CSS roughly six times faster than cssnano, with only about a 1% increase in size. Users can switch back to cssnano or try the experimental parcelCSS.

export default {
  cssMinifier: 'parcelCSS',
  cssMinifierOptions: {},
}

Beyond compression, esbuild is also used for real‑time compilation of JS/TS files, import/export analysis, and testing. It enables TypeScript syntax in configuration and mock files via a require hook, and it assists the es‑module‑lexer by first transforming JSX‑containing files to ESM. Umi 4’s test runner uses esbuild as the default JS transformer, offering a significant speed advantage over ts‑jest, while still allowing swc or ts‑jest via configuration.

Dependency Compilation

In a typical project with 600 source files, there may be around 6000 dependency files, making dependency compilation a major factor in overall build speed. Webpack’s dependency compilation cannot be avoided because it parses import/export statements via AST.

Umi 4 removes the nodeModulesTransform feature, so node_modules are no longer fully Babel‑compiled. Developers must manually identify and configure dependencies that use advanced syntax. Previously, enabling full compilation was a shortcut for ES5 support but caused ongoing build time overhead.

Externals provide a way to bypass webpack’s dependency compilation. Earlier, the bmwAutoExternals configuration existed but could not be verified locally, leading to discrepancies between dev and build environments. Umi 4 resolves this by allowing local verification of bmwAutoExternals.

Umi 4 defaults to webpack 5, which includes a physical caching mechanism—a significant advantage over tools like Vite. Smallfish has already integrated iterative build caching, and Umi 4 adds support for cache validation, download, and upload during the build phase, further accelerating builds. This remote caching mechanism will also be applied to MFSU, enabling more precise invalidation of cached dependencies.

References:

https://zhuanlan.zhihu.com/p/139219361

“彻底告别编译 OOM，用 esbuild 做压缩器” – https://github.com/vitejs/vite/pull/4371

Vite’s esbuild CSS compression PR – https://github.com/vitejs/vite/pull/4371