Choosing the Right Micro‑Frontend Strategy: Qiankun vs Umi Micro vs Iframe

Solution 1: Micro‑Frontend

To aggregate entry points of various ZhiHui Cloud product platforms into a single, customizable, and quickly searchable solution, we built a one‑stop multi‑platform management approach.

1. Underlying Principles

1.1 Qiankun (based on Single‑Spa)

HTML Entry : Packages sub‑applications using Single‑Spa and loads their HTML/JS/CSS via an HTML entry point.

Lifecycle Management : Defines bootstrap , mount , and unmount hooks to control loading, rendering, and unloading of sub‑apps.

Sandbox Isolation : Snapshot Sandbox (IE compatible) : Uses Proxy or Object.defineProperty to record global variable modifications and restores them on unload. Proxy Sandbox (modern browsers) : Intercepts global scope operations with Proxy for strict isolation.

Style Isolation : Achieved via shadow DOM or CSS namespace (e.g., unique prefixes) to avoid style conflicts.

Resource Loading : Dynamically loads sub‑app JS/CSS, supporting import-html-entry to parse resource links in HTML.

1.2 Umi Micro (Wujie)

Core Principle : Leverages Webpack 5 Module Federation together with native ES Modules.

Module Sharing : Sub‑apps expose specific modules (React components, JS methods) that the main app imports directly, avoiding full HTML loading.

Sandbox Isolation : Relies on ES Module scope isolation; global variables of sub‑apps do not pollute the main app (effective only in modern browsers).

Style Isolation : Implemented via CSS scope mechanisms such as CSS Modules, CSS‑in‑JS, or global style prefixes.

Hot Update Support : Uses Webpack HMR so sub‑app updates do not require a full page refresh.

2. Feature Comparison

3. Pros and Cons

Qiankun

Advantages : Strong compatibility – supports IE11 and modern browsers, suitable for complex legacy systems. Full‑application integration – can embed independently running sub‑apps. Mature ecosystem – built on Single‑Spa with abundant community resources.

Disadvantages : Potential duplicate resource loading (e.g., React) increases bundle size. Sandbox performance overhead, especially the snapshot sandbox in IE. Style isolation requires manual handling (prefixes or shadow DOM).

Umi Micro

Advantages : Module‑level sharing reduces duplicate dependencies and improves performance. Fine‑grained hot updates enhance developer experience. Low intrusion – sub‑apps only need to expose modules, no lifecycle adaptation.

Disadvantages : Browser limitation – does not support IE, targeting modern browsers only. Scenario limitation – better suited for component/module level micro‑frontends rather than full‑app aggregation. Technology lock‑in – heavily depends on Webpack Module Federation and the Umi framework.

4. Integration Cost

Qiankun Integration

Main App Configuration : Install qiankun , register sub‑app routes and entry URLs, and use loadMicroApp to launch sub‑apps.

Sub‑App Refactoring : Add qiankun dependency and export lifecycle functions ( bootstrap / mount / unmount ). Handle global variable pollution (e.g., avoid modifying window ). Manually ensure style isolation (CSS prefixes or shadow DOM).

Learning Curve : Requires understanding of Single‑Spa lifecycle and sandbox mechanisms.

Umi Micro Integration

Main App Configuration : Use the Umi framework, enable the micro plugin, and declare sub‑app module sources (URL or local path).

Sub‑App Refactoring : Configure Webpack 5 Module Federation exposes field. Align dependency versions (e.g., same React version) with the main app.

Learning Curve : Requires familiarity with Webpack Module Federation and ES Module features.

5. Scenario Recommendations

Choose Qiankun when you need IE compatibility or need to integrate legacy full applications (Angular 1.x, Vue 2, etc.) and the micro‑frontend scenario is "application‑level aggregation".

Choose Umi Micro when the tech stack is modern (React/Vue 3), IE support is not required, and the scenario is "component/module‑level sharing" such as a common component library across projects.

6. Common Issues Encountered

Qiankun

Style Isolation : Default sandbox may not fully isolate styles in multi‑instance scenarios; enabling {strictStyleIsolation: true} wraps each micro‑app in a shadow DOM but requires adaptation.

Router Navigation : Direct use of or router.push/replace inside sub‑apps can cause incorrect navigation; solutions involve passing the main app's router instance or using history.pushState .

React Version Mismatch : Inconsistent React versions lead to router errors such as "You should not use outside a ".

Umi Micro

Browser Back/Forward Anomalies : Different modes (rebuild, singleton, keep‑alive) cause irregular behavior when using browser navigation buttons.

Rich‑Text Editor Issues : Components like wangEditor may malfunction because sub‑apps run inside an iframe and shadow DOM, affecting DOM checks.

7. Summary

Qiankun is a mature "application‑level micro‑frontend" solution suitable for complex compatibility requirements and large‑scale system integration.

Umi Micro is a lightweight "module‑level micro‑frontend" solution ideal for modern stacks and fine‑grained resource sharing.

Both require sub‑app lifecycle or module‑federation refactoring; Qiankun demands more effort for sandbox and style handling, while Umi Micro has higher build‑tool prerequisites.

Solution 2: Iframe + postMessage Communication

Background: All platforms already integrate a unified JS SDK for data and UI handling, enabling centralized main‑sub app communication. Requirement: Minimize sub‑app integration cost.

1. Main App ↔ SDK Communication

<code>// SDK exposes a method that the main app can listen to
Sdk.on('sendToMfeMain', ({type, data}) => {
  setSendToMfeMainData(data);
});

// Main app sends a message to a sub‑app
const zyunMfePostMessageToChild = (iframeObj, msgObj) => {
  if (!iframeObj) return;
  iframeObj.contentWindow.postMessage({
    ...msgObj,
    parentOrigin: 'zyun_mfe_main'
  }, "*");
};
</code>

2. Sub‑App Adjustments

1) Listen for message events to hide shared header/menu when embedded.

2) On route changes, send a postMessage to update the main app's URL.

<code>// Sub‑app listens for messages
window.addEventListener("message", (event) => {
  const { type, route, parentOrigin } = event.data;
  if (parentOrigin === 'xxxx_mfe_main') {
    if (type === "zyunMfeSendOnloadNavigate") {
      // First load success
      window.history.pushState(null, route);
    }
  }
});

// Sub‑app uses the navigation SDK to react to route updates
sdk.on('changeRouterFromMfe', (url) => {
  // e.g., react history.push(url)
});
</code>

Characteristics

Leverages an existing unified JS SDK; no extra framework import needed.

Core logic and UI are handled by the SDK, reducing sub‑app development effort.

Sub‑app retains its original routing logic; only notifies the main app when URL updates are required.

Supports various front‑end frameworks without imposing routing constraints.

Drawbacks

Iframe rendering lacks a keep‑alive mechanism; each switch reloads the sub‑app.

Results in poorer user experience for complex apps and unnecessary resource consumption.

Improvement Plans

State Preservation : Keep sub‑app state during switches and restore after page refresh to shorten load time.

Technical Enhancements : Pure front‑end CSS visibility control for lightweight apps. Server‑side pre‑loading similar to Single‑Spa, supporting various history modes. Implement memory leak detection and automatic reclamation. Add performance monitoring (load time, memory usage) for future optimization.

The above outlines two solutions and practical experience to help developers choose the most appropriate micro‑frontend strategy.