What’s New in Umi 4? A Deep Dive into Its Latest Front‑End Features

Umi 4 is now on npm

Two months ago the internal Ant Group network released a framework based on Umi 4, now used by nearly 100 applications; the core functionality is stable and this is the first public release after internal deployment.

What new features does Umi 4 bring?

Multiple build engines : Umi 4 supports both Vite and Webpack with a single configuration switch, allowing developers to use Vite for development and Webpack for production builds.

export default {
  vite: {}
}

Default fast performance : Leveraging MFSU V3, Webpack 5 caching, esbuild for JS/CSS compression, and optimized runtime, Umi 4 dramatically reduces both dev and build compilation times.

MFSU V3 : The new version resolves many pain points of the previous MFSU, is enabled by default, and can be disabled via mfsu: false. It can also be used independently of Umi.

Umi Max : An external version of the internal Bigfish framework offering a comprehensive set of best‑practice plugins for middle‑back office applications, with examples like the Kuaishou and Alita customizations. $ npm i @umijs/max -D React Router 6 : Updated routing brings a more elegant implementation and removes a lot of legacy code, though it introduces breaking changes such as replacing { props.children } with <Outlet />.

- { props.children }
+ <Outlet />

Vue support : By adding the preset @umijs/preset-vue, developers can switch to Vue with a simple configuration.

export default {
  presets: ['@umijs/preset-vue'],
};

Automatic HTTPS : The dev server generates self‑signed certificates via mkcert automatically, requiring only the mkcert tool to be installed.

Build progress bar in the browser : When a build is running, a progress bar appears, supporting multiple Webpack instances and MFSU.

Terminal logging : Console logs can be displayed directly in the terminal using the terminal.log API.

import { terminal } from 'umi';
terminal.log(`Some info from the app`);

Umi UI (lightweight) : A /__umi/ route provides internal state visibility during development, similar to a minimal UI.

Project‑level plugin ( plugin.ts ) : Allows direct use of plugin APIs without registration, supporting TypeScript.

import { IApi } from 'umi';
export default (api: IApi) => {
  api.modifyHTML($ => $);
  api.addEntryCodeAhead(() => ['console.log(\'entry code ahead\')']);
  api.addEntryCode(() => ['console.log(\'entry code\')']);
  api.onBuildComplete(opts => {});
  api.onStart(opts => {});
  api.onCheckCode(args => {});
  api.modifyRoutes(routes => {});
};

Dead‑code detection : Configuring deadCode: {} enables detection of unused files during the build.

Warning: There are 3 unused files:
 1. /mock/a.ts
 2. /mock/b.ts
 3. /pages/index.module.less

Future roadmap : Plans for 2022 include a new best‑practice guide, MFSU V4, Father 4 and dumi 2 for component development, the bundless ESMi build system, and continued focus on developer experience and speed.