How Umi’s Design Boosts Frontend Speed and Reliability: Insights from SEE Conf 2022

What is Umi

Umi is an open‑source frontend framework from Ant Group built on React. It powers over 10,000 internal projects and is used by about 25% of surveyed developers. Umi abstracts routing, building, and runtime concerns to lower the entry barrier for developers.

Compilation‑time Framework

Compared with earlier frameworks, compilation‑time tools reduce boilerplate, surface errors earlier, shrink output bundles, and move many configurations into declarative settings. Umi performs AST analysis, builds a dependency graph, and generates temporary files before handing the code to Webpack, automating tasks that developers previously handled manually.

Dependency Pre‑bundling

Umi reduces the number of node modules from over 1,300 to around 300 by pre‑bundling dependencies. This improves security, stability, installation speed, reduces the size of node_modules, and eliminates peer‑dependency warnings.

Speed Optimizations (MFSU)

Umi’s first solution for “default fast” is MFSU, which leverages Webpack 5’s Module Federation to achieve fast startup, hot updates, and page loads. It combines caching, native code (esbuild, swc), and selective bundling to outperform vanilla Webpack.

Multi‑build Engine

Umi supports multiple build engines: Webpack, Vite, and experimental esbuild. Developers can switch between them while keeping feature parity, allowing dev environments to use Vite for speed and Webpack for production builds.

Constraints and Openness

Ant Group enforces 50 strong constraint rules to ensure consistency, security, and maintainability, such as limiting data‑flow libraries, prohibiting eval, and requiring the latest framework version within a major release. The community version of Umi is more modular and transparent, offering “atomic + assembly” usage instead of a monolithic configuration.

Umi 4 Highlights

Systematic default fast performance

Dependency pre‑bundling for safety and stability

Dual build engines for flexibility

Up‑to‑date stack including React Router 6

Improved best‑practice plugins for requests, data flow, and internationalization

Umi Pro as the external version of the internal Bigfish framework