Micro‑Frontend Architecture for Building a Class‑Single‑Page HR Application at Meituan

Micro‑frontend, proposed by ThoughtWorks in 2016, brings the micro‑service philosophy to the browser by decomposing a monolithic web app into many small front‑end applications that are aggregated into a single user experience.

Meituan, a large internet company, needed to improve development efficiency for its HR system, which consists of over 30 micro‑frontends, 1,000+ pages and 300+ navigation items. The traditional iframe approach caused navigation loss, size constraints, URL handling issues, and style incompatibilities, so a micro‑frontend solution was adopted.

The solution centers on a "Portal" project that acts as a container without business logic, providing registration, merging, and system‑level services such as single sign‑on, menu permission, global error handling and data tracking. Each independent sub‑project ("child project") only outputs static assets (js, css, fonts, images).

Application registration is performed via a global window.app object. Child projects push their route definitions into window.app.routes, and the portal renders a unified router built on react‑router. Example route registration:

let Router = <Router fetchMenu={fetchMenuHandle} routes={routes} app={App} history={history}>;
ReactDOM.render(Router, document.querySelector("#app"));

The router tree generated from the merged routes looks like:

<Router>
  <Route path="/" component={App}>
    <Route path="/namespace/xx" component={About} />
    <Route path="inbox" component={Inbox}>
      <Route path="messages/:id" component={Message} />
    </Route>
  </Route>
</Router>

To avoid style leakage, a CSS namespace (e.g., .namespace‑kaoqin) is added to every selector during the webpack post‑processing stage, ensuring each child project’s styles are scoped to its own root element.

JavaScript library version consistency is achieved by redefining imports: the portal replaces require('react') with window.app.require('react') using a custom app.define function and webpack externals. This centralizes library versions and prevents duplicate bundles.

Build and deployment follow a three‑step process: (1) fetch code, install dependencies and run the build on a CI machine; (2) upload the compiled assets to the server; (3) start the Node service with node index.js. The portal, child projects and final runtime directory structures are illustrated with diagrams in the original article.

After more than a year of production use, the micro‑frontend HR system delivers a smooth single‑page experience, decoupled business modules, high stability, and a minimal registration overhead (approximately 12 KB for 30 projects).