Bifrost: Meituan's Micro‑Frontend Framework for Scalable Front‑End Development

Meituan Flash Delivery's R&D team built a micro‑frontend framework called Bifrost to address the challenges of evolving a single‑business SPA into a multi‑business management platform. The framework enables independent development, deployment, and runtime integration of multiple Vue‑based sub‑systems while preserving a seamless single‑page experience.

Project background : The original enterprise‑management platform was a single‑merchant CRM built with a conventional Vue SPA. As the product grew, it needed to support multiple scenarios, multiple front‑end teams, and customizations per merchant, leading to code conflicts, duplicated effort, and integration pain.

Requirements (in priority order):

Independent development and deployment of modules across remote teams.

Low‑cost integration of new modules into the existing platform without major changes to build or deployment pipelines.

Isolated sub‑systems that can be jointly tested during development.

Maintain SPA‑like user experience.

Support Vue stack (no need for technology‑agnostic solution).

The team evaluated common micro‑frontend approaches (Nginx routing, iframe embedding, internal Meituan HR micro‑frontend, SingleSPA) and chose to develop a custom solution that fits their production constraints.

Core architecture : Bifrost separates the system into a host (main) application and multiple sub‑systems . The host manages a registry, lifecycle, routing, resource loading, and mounting points. Sub‑systems are full Vue apps that render into their dedicated DOM nodes.

The host’s responsibilities are:

Maintain a registry of sub‑systems.

Manage sub‑system lifecycles.

Dispatch routing information.

Load entry resources of sub‑systems.

Provide mounting points for sub‑systems.

Sub‑systems are categorized as business sub‑systems, shared menu sub‑systems, and layout sub‑systems. Layout sub‑systems are also Vue apps but are wrapped with LayoutContainer instead of AppContainer.

Implementation examples :

Host initialization:

import { Platform } from '@sfe/bifrost'

new Platform({
  layoutFrame: {
    render () {
      // render layout
    }
  },
  appRegister: [
    { appName: 'app1', configPath: '/path/to/app1/config.js' }
  ]
}).start()

Business sub‑system registration:

import { AppContainer } from '@sfe/bifrost'
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
const router = new VueRouter({})

new AppContainer({
  appName: 'app1',
  router,
  mounted () {
    return new Vue({
      router,
      components: { App },
      template: '<App/>'
    }).$mount()
  }
}).start()

Layout sub‑system registration:

import { LayoutContainer } from '@sfe/bifrost'
import Vue from 'vue'
import App from './app'

new LayoutContainer({
  appName: 'layout',
  router,
  onInit ({ appSlot, callback }) {
    Vue.config.productionTip = false
    const app = new Vue({
      el: '#app',
      router,
      render: h => h(App, { props: { appSlot } })
    })
    callback()
  }
}).start()

Engineering practices :

Local debugging : A MockPlatform mimics the host at development time, loading remote sub‑system resources so developers experience the same integration flow as in production.

Global state : The host holds a Vuex store; sub‑systems synchronize via syncGlobalStore and can share modules through installGlobalModule.

Shared dependencies : Common libraries (lodash, Moment, etc.) are externalized into a DLL bundle loaded by the host, while Vue remains unbundled to avoid prototype conflicts.

Module reuse : Shared business components and utilities are maintained in separate Git repos and linked via Lerna and Git sub‑modules.

Release & deployment : Sub‑systems are published as static assets to a CDN; the host loads them via JSONP configuration files. Meituan’s internal CI platform (Talos) handles static resource publishing.

Version control & gray releases : The host determines the user’s traffic segment (full or gray) and loads the appropriate sub‑system versions, enabling incremental upgrades without halting development.

Monitoring & error reporting : Hooks such as onAppLoading, onAppLoaded, onAppRouting, and onError provide metrics for PV, load success rate, and failure diagnostics.

Benefits observed after six months of production:

Complete decoupling of remote teams, eliminating merge conflicts.

Prevention of a monolithic SPA; each sub‑system stays under ~30 pages, improving maintainability.

Facilitated large‑scale component library upgrades via incremental sub‑system updates.

Drawbacks include added complexity, the need for consistent coding standards across teams, extra automation tooling, and handling of shared cookies across sub‑domains.

When to adopt micro‑frontends:

Large back‑office systems with many relatively independent functional modules.

Projects with extensive legacy code where new features must be added without rewriting existing modules.

Future work for Bifrost aims to provide richer front‑end micro‑service governance tools, JS/CSS sandboxing, and support for additional technology stacks.

In conclusion, Bifrost demonstrates a production‑grade micro‑frontend solution that bridges concept and practice, offering a scalable architecture for complex front‑end ecosystems.