MicroApp V1.0.0‑rc Release: Core Architecture, High‑Performance Sandbox, New Configurations, and Real‑World Use Cases

MicroApp, a widely adopted micro‑frontend framework within JD.com and other systems, has released version V1.0.0‑rc after a year of optimization, offering a core solution, practical cases, and future plans.

What is micro‑frontend? It is a technique that splits a large monolithic application into independent small apps that can be developed, deployed, and run separately, then aggregated to form a complete system, improving flexibility, decoupling, and team collaboration.

Core solution – MicroApp adopts a WebComponent‑inspired component model combined with a virtual routing system. It wraps each sub‑application in a custom element, providing style and element isolation while avoiding the compatibility issues of native ShadowDOM.

Virtual routing system – By redefining location , history , and intercepting popstate and hashchange , MicroApp isolates parent and child routes, synchronizes child route state to the browser URL, and offers APIs for route control and information exchange.

High‑performance sandbox – The new sandbox solves the long‑standing performance penalty of traditional proxy + with sandboxes by caching global variables, reducing with calls, applying async debouncing, and minimizing proxy operations. It also caches static resources (JS, CSS, HTML) and page/route state, enabling pre‑loading, pre‑parsing, and pre‑rendering, and supports ES‑Module integration with tools like Vite.

Performance tests inserting 500 × 20‑cell tables and rendering 10 000 elements show MicroApp outperforming qiankun by 3‑4×, approaching native JavaScript speed.

New configuration items (6 added, total 16) – clear-data (clear cached communication data on unload), disable-memory-router (turn off virtual router), default-page (specify initial page), keep-router-state (preserve route state after unload), disable-patch-request (stop automatic request URL rewriting), and fiber (run sub‑app JS asynchronously to reduce main‑thread blocking).

Global lifecycle listeners can be registered as follows:

import microApp from '@micro-zoe/micro-app'
microApp.start({
  lifeCycles:{
    created(e){ console.log('created', '
tag initialized') },
    beforemount(e){ console.log('beforemount', 'resources loaded, before render') },
    mounted(e){ console.log('mounted', 'sub‑app rendered') },
    unmount(e){ console.log('unmount', 'sub‑app unloaded') },
    error(e){ console.log('error', 'render error that aborts rendering') }
  }
})

Data clearing API :

// clear data sent from current sub‑app to main app
microApp.clearData()
// clear data sent from main app to a specific sub‑app
microApp.clearData('my-app')

Embedding MicroApp is as simple as one line of code, similar to an iframe :

import microApp from '@micro-zoe/micro-app'
microApp.start({/* options */})

Practical case – JD’s Marketing Center integrated over 30 sub‑applications via MicroApp, reducing development effort by ~80% and delivering native‑level performance.

Future roadmap – The upcoming 1.0 version will open all the discussed “black‑tech” features for public use.