Micro‑Frontend Architecture with Qiankun and Module Federation: Design, Implementation, and Performance

Introduction: Qiankun is a community‑driven micro‑frontend framework; MF (Module Federation) is a popular micro‑frontend solution introduced in Webpack 5.

1. Business Background

The customer‑service one‑stop workbench consists of four major functions (online service, phone, ticket, tools). Each business module is large and independent, and the original SPA + iframe architecture caused several problems:

Slow first‑screen load due to heavy resources and tangled entry‑file logic.

Numerous iframes lead to memory leaks, performance degradation, and occasional browser crashes.

To address these issues, the team split the workbench using micro‑frontend techniques.

2. Technical Solution Research

Micro‑frontend brings the benefits of technology‑stack independence, independent development and deployment, incremental upgrades, and isolated runtime state.

Common open‑source solutions surveyed include:

iframe, single‑spa, qiankun, icestark, Garfish, microApp, ESM, EMP.

Key features: js entry, html entry, sandbox isolation, style isolation, web components, Module Federation.

After evaluation, the team selected qiankun + Module Federation as the core framework, dividing the application into four independent subsystems that can be developed and deployed separately. Remote components are loaded where needed (e.g., IM, ticket, order details).

2.1 Architecture Diagram

(Image omitted)

2.2 Remote Component Planning

(Image omitted)

3. Solution Implementation

3.1 Micro‑App Caching

Qiankun provides two registration APIs:

registerMicroApps(apps, lifeCycles?) : suitable for route‑based scenarios; automatically registers and destroys apps on route change.

loadMicroApp(app, configuration?) : suitable for manual load/unload, enabling caching and simultaneous loading of multiple micro‑apps.

Example registration:

import { registerMicroApps } from 'qiankun';
registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:8080',
    container: '#container',
    activeRule: '/react',
    props: { name: 'kuitos' }
  },
  {
    name: 'app2',
    entry: '//localhost:8081',
    container: '#container',
    activeRule: '/vue',
    props: { name: 'Tom' }
  }
], {
  beforeLoad: app => console.log('before load', app.name),
  beforeMount: [app => console.log('before mount', app.name)]
});

Manual loading with caching:

const loadMicroAppFn = microApp => {
  const app = loadMicroApp({
    ...microApp,
    props: { ...microApp.props, microFn: status => setMicroStatus(status) }
  }, { sandbox: true, singular: false });
  return app;
};

3.2 Sandbox Isolation & Third‑Party Resources

Qiankun offers two sandbox modes: LegacySandbox and SnapshotSandbox. When loading third‑party scripts, global variables must be explicitly attached to window to be accessible inside the sandbox.

// global.js
var globalMicroApp = 'micro-name';
window.globalMicroApp = globalMicroApp;

3.3 Application Communication

Communication methods include URL parameters, window , postMessage , Qiankun props , and initGlobalState . The article demonstrates props and initGlobalState approaches.

// Base app
import { initGlobalState } from 'qiankun';
const actions = initGlobalState(state);
actions.onGlobalStateChange((state, prev) => console.log(state, prev));
actions.setGlobalState(state);

// Micro app mount
export function mount(props) {
  props.onGlobalStateChange((state, prev) => console.log(state, prev));
  props.setGlobalState(state);
}

3.4 Remote Component Integration

Remote components are implemented via Webpack 5 Module Federation. The entry file must expose only Qiankun lifecycle functions to avoid duplicate bundles.

const { bootstrap, mount, unmount } = await import('./bootstrap');
export { bootstrap, mount, unmount };

3.5 Style Isolation

Qiankun’s sandbox option provides basic style isolation. Setting strictStyleIsolation: true wraps each micro‑app in a Shadow DOM. An experimental mode rewrites CSS selectors to add a namespace.

.app-main { font-size: 14px; }
/* After experimental isolation */
.basic-project .app-main { font-size: 14px; }

For UI libraries like Ant Design, the prefixCls can be customized to avoid global style conflicts.

.basic-menu-item { text-align: center; padding: 10px; }

4. Effectiveness

After refactoring with micro‑frontend:

Metric

Before

After

CR Efficiency

Slow

Decoupled sub‑apps, ~1/3 time saved

Development Efficiency

Heavy coupling, difficult

Independent development, higher efficiency

Release Process

Heavy, many tests

Independent releases, faster delivery

Remote Components

Unsupported

Supported

5. Reflection & Summary

The project faced challenges such as implementing micro‑app caching, handling page refreshes, integrating third‑party plugins (including jQuery and JSONP), and migrating from Vite to Webpack 5 due to limited Vite support in Qiankun. Overcoming these hurdles yielded significant benefits and deepened the team’s understanding of micro‑frontend trade‑offs. The key takeaway: choose the right framework for the specific business scenario; micro‑frontend is not a silver bullet but a valuable tool when applied appropriately.