How NetEase Yanxuan Scales Front‑End Development with Enterprise‑Grade Micro‑Frontend Architecture

Preface

Micro‑frontend is a design approach that decomposes a front‑end application into multiple loosely coupled, semi‑independent “micro‑apps”, inspired by micro‑services.

Senior front‑end engineer Zhang Hao from NetEase Yanxuan explains the company's enterprise micro‑frontend solution and its practical implementation.

1. Background for Building Micro‑Frontend at Yanxuan

Key driving factors include:

Rapid iteration and upgrade of a diverse tech stack (NEJ, jQuery, Angular, React, Vue, etc.) requiring compatibility with legacy projects.

Maintenance difficulty of “giant stone” applications with hundreds of pages and long build times.

Need for cross‑system workflow (e.g., procurement orders spanning procurement, product, and finance systems) leading to cumbersome development cycles.

Challenges of multi‑team collaboration, code conflicts, and lack of isolation.

Since early 2019, Yanxuan has researched and iterated on micro‑frontend solutions, eventually forming a complete architecture.

2. Core Points of the Micro‑Frontend Solution

2.1 Application Development Chain (Closed Loop)

Projects are created with @sharkr/cli based on webpack. Conventions, plugins, and configurations enable zero‑cost integration—no manual changes are needed for each micro‑app during development, build, or deployment.

Examples:

Automatic adjustment of webpackJsonp names for multiple React apps to run on the same page.

Generated /xhr/config/get.json on the Node side to provide JS/CSS asset paths for each app.

2.2 Main Framework Technical Highlights

Various mainstream micro‑app architectures are compared:

MPA + Router Distribution : Framework‑agnostic, full isolation, but poor reuse and longer load times.

Single‑SPA‑like solutions : Framework‑agnostic, independent deployment, easy composition, but require mount/unmount hooks and may cause global pollution.

Base‑SPA (host‑sub app) : Host provides most runtime, sub‑apps contain only business code; CSS isolation is challenging.

Componentization (Web Components, private npm) : Gradual enhancement, but scaling component count increases maintenance cost.

Overall, Single‑SPA‑style approaches are deemed the most suitable for Yanxuan.

2.3 Application Isolation

Two isolation strategies are employed:

Hard Isolation : Reload the window before loading a sub‑app, combined with snapshot‑resume and SSR techniques to minimize visual disruption.

Soft Isolation : Use a sandbox to record and restore global variable changes, event listeners, timers, and prototype modifications. CSS isolation is achieved by tracking and removing link and style tags of each sub‑app.

While perfect sandboxing is impossible, the implemented measures cover most practical cases.

2.4 Application Communication

An event bus is provided for cross‑app communication. Example usage:

import { Event } from '@sharkr/utils';
Event.on('customEvent', (data) => {
    console.log(data);
});
Event.dispatch('customEvent', someData);

2.5 Configuration Center and Supporting Facilities

The configuration center stores application metadata, relationships, proxy settings, and access control, enabling developers to manage micro‑apps efficiently.

3. Practical Value Delivered to Yanxuan

Breaking giant monoliths into manageable micro‑apps.

Enhanced module reuse —shared capabilities become independent sub‑apps (“write once, run anywhere”).

Revolutionized workflow development —a single procurement‑order micro‑app can be integrated across multiple systems without involving all related teams.

Optimized multi‑team collaboration —teams develop independent micro‑apps using any allowed tech stack, then register them in the configuration center.

4. The Next Generation Front‑End Development Model

The internal codename for Yanxuan’s micro‑frontend solution is “wolf”. When many micro‑apps cooperate like a wolf pack, they achieve a 1+1>2 effect.

Future plans include open‑sourcing the core framework (similar to qiankun or Single‑SPA) and contributing the accumulated knowledge to the front‑end community.

Author Introduction

Zhang Hao, senior front‑end engineer at NetEase, responsible for front‑end architecture of large projects such as NetEase Enterprise Mail, NetEase Youqian, and NetEase Yanxuan.