micro-app前端微服务原理解析

一、核心设计思想

1. 基于 WebComponents 的组件化渲染
   micro-app 借鉴 WebComponents 的 CustomElement 和 ShadowDom 特性，将子应用封装为类似 WebComponent 的自定义标签（如 ）。通过 ShadowDom 的天然隔离机制，实现子应用的样式隔离和元素隔离，避免全局污染。子应用的 JS、CSS 和 HTML 被动态加载到 ShadowDom 中，形成独立渲染区域。

2. 无侵入式接入
   与 single-spa 和 qiankun 不同，micro-app 不要求子应用修改入口文件（如暴露 bootstrap、mount、unmount 方法）或调整 webpack 配置，只需添加少量路由和跨域设置即可接入，显著降低改造成本。

二、关键技术实现

1. JS 沙箱与作用域隔离

   • 沙箱机制：通过 Proxy 代理全局对象（如 window、document），为每个子应用创建独立的 JS 执行环境。子应用对全局变量的修改仅作用于沙箱内部，避免多应用间的冲突。
   • 依赖共享：支持基座应用向子应用注入公共依赖（如 React、Vue），减少重复加载，提升性能。

2. 样式隔离方案

   • 动态样式表：子应用的 CSS 通过