微前端框架 Wujie

无界微前端（Wujie Micro Frontends） 是一个基于 Web Component 和 Proxy 的微前端解决方案，由腾讯团队开源。它通过轻量化的设计，实现了极致的性能和开发体验：

---

一、无界微前端核心概念

1. 什么是无界微前端？

• 定位：一种基于 Web Component 和 Proxy 沙箱 的微前端框架，主打 轻量化 和 无感知接入。
• 核心优势：
  • 无侵入性：子应用无需修改代码，直接嵌入主应用。
  • 高性能：通过 Proxy 实现 JS/CSS 隔离，沙箱开销极小。
  • 多框架支持：完美兼容 React、Vue、Angular 等主流框架。

2. 核心设计思想

• 应用即组件：将子应用封装为 Web Component，通过标签直接嵌入主应用。
• 运行时沙箱：通过 Proxy 代理全局对象（如 window、document），实现 JS 隔离。
• 样式隔离：通过 CSS Scope 或 Shadow DOM 实现样式隔离。

3. 关键角色

• 主应用（Host）：承载子应用的容器，负责调度子应用生命周期。
• 子应用（Micro App）：独立开发、部署的前端应用，通过无界嵌入主应用。
• 沙箱（Sandbox）：隔离子应用的运行环境，防止全局污染。

---

二、无界微前端核心原理

1. Web Component 封装

• 子应用被包装为自定义 HTML 标签（如 ），通过 Shadow DOM 或 CSS Scope 实现样式隔离。
• 示例：

  
  <micro-app name="app1" url="http://localhost:3001">micro-app>
  

2. JS 沙箱机制

• Proxy 代理：拦截子应用对 window、document 等全局对象的访问，确保各子应用的全局环境独立。
• 快照机制：子应用卸载时恢复主应用的全局状态。

3. CSS 隔离

• Shadow DOM：默认使用 Shadow DOM 隔离子应用样