微前端框架 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 标签（如
<micro-app>），通过 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 隔离子应用样