Micro Frontend Architecture: Concepts, Benefits, and Practical Implementation Guide

Background : The company’s main front‑end project grew too large, causing slow builds and a poor user experience when using iframes to split functionality.

Basic Concept of Micro Frontends : Inspired by the 2016 ThoughtWorks radar, micro frontends extend micro‑service ideas to the front‑end, breaking a monolithic SPA into independently developed feature modules managed by separate teams.

Advantages : Reduced complexity, independent deployment, flexible technology selection, fault isolation, and easy horizontal scaling.

When to Adopt : Legacy stacks, massive codebases with slow compilation, single‑technology limitations, or the need to integrate existing projects.

Implementation Approaches : Using iframes, router‑based distribution, Web Components, or custom frameworks such as single‑spa and qiankun.

Comparison : Contrasts a monolithic front‑end with a micro‑frontend architecture, illustrating modular independence.

How to Build a Micro Frontend Application : The architecture consists of a loader (core scheduler), a wrapper (adapter), a host application (shared UI), and child applications (feature modules).

Step‑by‑Step Implementation :

Prepare two projects: a host (main) and a child (sub) project, both using Vue (applicable to React/Angular as well).

Modify vue.config.js in the child project: set publicPath to the child’s CDN/OSS location, add CORS headers, configure output for window or UMD, and generate a manifest.json with stats-webpack-plugin to list entry points.

Scope child CSS with a unique prefix (e.g., single-spa-vue ) to avoid style leakage.

Update main.js to export the three single‑spa lifecycles ( bootstrap , mount , unmount ) via the single-spa-vue plugin.

Adjust router.js in the child to include a baseUrl matching the host’s module prefix.

Create single-spa-config.js in the host to dynamically inject script tags for child bundles, register the child module, and ensure loading order (host first, then child).

Update the host’s router.js with wildcard routes ( * ) to prevent 404s on child page refreshes.

Provide a container element in App.vue (with the same CSS prefix) for the child to mount into.

Implement simple communication via the shared window object, allowing the child to invoke host‑registered functions (e.g., token expiration handling).

Optimize bundling by extracting common dependencies to the host, ensuring version compatibility across projects.

Conclusion : The presented solution demonstrates a feasible micro‑frontend setup, while acknowledging areas for further improvement such as sandboxed JS isolation, shared state management, pre‑loading strategies, nested micro frontends, and host‑to‑child state propagation.