Micro‑Frontend Architecture Selection and Implementation with qiankun

Background – Rapid growth of business lines created many overlapping management back‑ends, forcing users to switch between platforms. To unify these consoles and enable independent development, testing, and deployment by multiple teams, a micro‑frontend architecture was chosen.

Micro‑frontend solution options

Server redirect

iframe

WebComponent

Route‑based base applications

Single‑SPA

qiankun

The team ultimately selected qiankun because it builds on single‑spa with low intrusion, has proven maturity after internal Alibaba use, supports heterogeneous technology stacks, and offers strong extensibility for future upgrades.

What qiankun provides

Route control : hijacks navigation events to guarantee sub‑application load order.

HTML entry : loads sub‑app resources via an HTML entry point without extra configuration.

Lifecycle management : supplies a complete lifecycle for each sub‑application.

Style isolation : uses a dynamic stylesheet mechanism to add/remove CSS and avoid style leakage.

JS isolation : offers a sandbox to prevent global variable and timer conflicts between sub‑apps.

What qiankun does not handle automatically

Route conflicts between sub‑applications

Local‑storage key collisions

Unified JS runtime compatibility

Unified CSS compatibility

Management of shared dependencies

Reuse of common modules

Implementation details

The solution consists of a main application and multiple sub‑applications. The main app manages sub‑app distribution, routing, permission, menu, and shared state, while each sub‑app focuses on its business UI. Shared logic is extracted into a common class and passed via a global variable (window.POWERED_BY_QIANKUN) so sub‑apps can detect whether they run inside the main container.

Development workflow

Run the main app together with a sub‑app during local development to provide navigation.

Alternatively, keep the sub‑app’s own navigation bar and toggle its visibility based on the global flag.

Preventing route and storage conflicts

To make routes distinct, the main app uses HTML5 history while sub‑apps use hash routing, exposing paths such as /projectA/#/page1 . For local storage, each sub‑app prefixes keys with its own name.

Extensibility

When sub‑apps evolve, the main app dynamically configures menus and routes based on fetched menu data, reducing maintenance overhead.

Future outlook

Webpack 5’s Federated Modules introduce a new way to share modules across applications, but they do not support heterogeneous tech‑stack integration like qiankun. The growing complexity of front‑end projects makes micro‑frontend solutions essential for scalable, incremental upgrades.