Micro Frontend Architecture and Implementation with Qiankun: Principles, Practices, and Advanced Topics

The article begins by defining micro‑frontends as an architectural style inspired by backend micro‑services, emphasizing independent development, deployment, and runtime isolation, and explains why a tailored solution like Qiankun is often preferred over generic iframe approaches.

It then compares several technical solutions (iframe, Nginx routing, npm integration, generic and specific base‑router models, Webpack 5 Module Federation) across dimensions such as technology stack independence, build speed, SPA experience, project intrusion, and learning cost, helping readers select the most suitable option.

Qiankun registration is illustrated with code examples showing how to register micro‑apps using registerMicroApps and start , how to configure activeRule (string, array, or function), and how to bootstrap, mount, and unmount lifecycle hooks. Example snippets demonstrate adding a public-path.js file to fix __webpack_public_path__ and configuring Webpack output for UMD builds.

Routing strategies are discussed in depth, including how to add a prefix to routes, modify VueRouter configuration for hash and history modes, and use global router.beforeEach or overridden router.push to ensure correct navigation within a micro‑frontend environment.

Sandboxing is covered for both CSS and JavaScript. CSS isolation techniques such as BEM naming, CSS Modules, CSS‑in‑JS, Shadow DOM, and the experimental experimentalStyleIsolation feature are described, with guidance on when to use each. JavaScript sandbox options (snapshotSandbox, proxySandbox, legacySandbox) are explained, along with their limitations regarding global object pollution.

Resource sharing methods—including npm packages, Git submodules, Webpack externals, DLLs, and Lerna monorepos—are presented, with examples of how to expose shared components via props or the global window object, and how to use Qiankun’s initGlobalState for cross‑app state synchronization.

Inter‑application communication patterns are compared (URL, props, publish/subscribe, state management, storage) and concrete implementations are provided for an EventBus passed through props and for using Qiankun’s initGlobalState API.

Advanced topics such as keeping micro‑apps alive across route changes, handling memory leaks by tracking mount timestamps and automatic unmount timers, and supporting multiple micro‑apps on the same route using abstract router mode are also covered.

Finally, the guide outlines a recommended project structure for developing and deploying multiple micro‑frontends, shows how to use npm‑run‑all to orchestrate installation, serving, and building of all apps, and explains the necessary adjustments to publicPath and router base settings for production deployments.