无界微前端（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 隔离子应用样式。
• CSS Scope：通过添加前缀或命名空间实现样式隔离（适用于不支持 Shadow DOM 的场景）。

4. 资源加载

• HTML Entry：通过解析子应用的 HTML 入口文件，动态加载 JS/CSS 资源。
• 预加载：支持子应用资源的预加载，提升用户体验。

---

三、无界微前端快速上手

1. 主应用配置

1. 安装无界：

   npm install wujie -S
   

2. 注册子应用：

   // main.js（主应用入口）
   import { registerMicroApps, start } from 'wujie';
   
   registerMicroApps([
     {
       name: 'app1', // 子应用名称
       entry: 'http://localhost:3001', // 子应用入口
       container: '#container', // 挂载节点
       activeRule: '/app1', // 路由匹配规则
     },
   ]);
   
   start();
   

2. 子应用配置

• 无侵入性：子应用无需任何修改，只需满足：
  • 路由与主应用的路由前缀匹配（如主应用路由为 /app1/*，子应用路由需基于 /app1）。
  • 静态资源使用绝对路径（或通过 publicPath 配置）。

3. 通信机制

• props 传递：主应用向子应用传递初始数据。

  registerMicroApps([
    {
      name: 'app1',
      entry: 'http://localhost:3001',
      props: { user: 'Alice' }, // 传递数据
    },
  ]);
  

• 全局事件总线：通过 window.dispatchEvent 和 window.addEventListener 跨应用通信。
• 状态管理库：共享 Redux、Vuex 或 Pinia 等状态管理实例。

---

四、无界微前端高级特性

1. 子应用保活（Keep-Alive）

• 场景：子应用切换时保留状态（如 Tab 切换）。
• 配置：

  registerMicroApps([
    {
      name: 'app1',
      entry: 'http://localhost:3001',
      keepAlive: true, // 启用保活
    },
  ]);
  

2. 预加载子应用

• 提升性能：在空闲时预加载子应用资源。

  import { preloadApp } from 'wujie';
  preloadApp({ name: 'app1', entry: 'http://localhost:3001' });
  

3. 自定义生命周期

• 扩展能力：监听子应用加载、挂载、卸载等事件。

  registerMicroApps([
    {
      name: 'app1',
      entry: 'http://localhost:3001',
      beforeLoad: () => console.log('子应用即将加载'),
      afterMount: () => console.log('子应用已挂载'),
    },
  ]);
  

4. 多实例模式

• 场景：同一页面同时运行多个子应用实例。

  <!-- 主应用中嵌入多个实例 -->
  <micro-app name="app1" url="http://localhost:3001"></micro-app>
  <micro-app name="app1" url="http://localhost:3001"></micro-app>
  

---

五、无界 vs 其他微前端方案

特性	无界	qiankun	Module Federation
接入成本	子应用无需改造	子应用需导出生命周期	需配置 Webpack 和共享依赖
性能	极低（Proxy 沙箱）	较高（快照沙箱）	依赖打包优化
技术栈限制	无限制	无限制	需统一构建工具（Webpack 5）
样式隔离	Shadow DOM / CSS Scope	CSS 前缀隔离	依赖框架实现
适用场景	快速集成旧系统	企业级复杂应用	新项目模块化架构

---

六、常见问题与解决方案

1. 子应用样式失效

• 原因：Shadow DOM 导致主应用样式无法穿透。
• 解决：
  • 使用 CSS Variables 定义全局样式。
  • 关闭 Shadow DOM（shadowDOM: false），改用 CSS Scope。

2. 子应用路由冲突

• 原因：主应用与子应用路由前缀未正确配置。
• 解决：
  • 主应用使用路由前缀（如 /app1/*）。
  • 子应用使用 base 路由（如 Vue Router 的 base: '/app1'）。

3. 全局变量污染

• 原因：子应用直接修改 window 对象。
• 解决：确保子应用通过无界的沙箱环境运行，避免直接操作全局对象。

---

七、总结

无界微前端通过 Web Component 和 Proxy 沙箱 实现了极致的轻量化与无侵入性，尤其适合快速集成遗留系统或跨团队协作。其核心在于 运行时隔离 和 资源调度，我们只需关注业务逻辑，无需处理复杂的构建配置。初期学习建议从官方示例入手，逐步掌握生命周期管理、通信机制和性能优化技巧。