腾讯无界微前端框架介绍

news2024/11/24 12:12:15

一、无界微前端框架概述

无界微前端框架是由腾讯团队推出的，旨在解决现有微前端方案中存在的问题，如适配成本高、样式隔离困难、运行性能不佳、页面白屏、子应用通信复杂、子应用保活机制缺乏等。
在这里插入图片描述

技术实现

无界微前端的核心技术是基于Web Components容器 + iframe沙箱。通过这种方式，它可以实现以下目标：

成本低：无论是主应用还是子应用，使用成本都相对较低。
速度快：子应用首屏打开速度较快，且运行速度快。
原生隔离：通过Web Components实现了严格的样式隔离，而JavaScript则运行在iframe中，保证了代码的隔离。
功能强大：支持子应用保活、子应用嵌套、多应用激活、应用共享等功能。

二、代码实例

下面是一个简单的代码示例，展示如何使用无界框架加载一个微应用：

主应用配置

假设您的主应用使用的是React或Vue，您可以这样配置无界：

// main.js
import Wujie from '@wujiejs/wujie';

const wujie = new Wujie({
  container: '#app', // 主容器的选择器
  apps: [
    {
      name: 'app1', // 微应用名称
      entry: '//localhost:8080', // 微应用入口URL
      activeRule: '/app1' // 激活规则
    }
  ]
});

wujie.start();

子应用配置

子应用需要做一些简单的配置以便被无界识别：

<!-- app1/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>App1</title>
  <script src="@wujiejs/wujie/client.js"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    // 注册子应用
    window.__WUJIE__.registerApp('app1');
  </script>
</body>
</html>

三、子应用通信

无界微前端框架通过多种机制来简化子应用之间的通信，确保通信既简单又高效。

通信机制

无界提供了以下几种通信机制：

Window.postMessage: 利用浏览器原生的 postMessage API 来实现跨iframe通信。
EventBus: 通过事件总线机制，子应用可以注册事件监听器，并且发送事件到其他子应用或主应用。
Props传递: 主应用可以通过props向子应用传递数据。

通信示例

使用 `postMessage` 发送消息

假设有一个子应用 app1 和一个主应用，app1 向主应用发送消息：

// 在子应用 app1 中发送消息
window.parent.postMessage({ type: 'CUSTOM_EVENT', payload: 'Hello from app1!' }, '*');

// 在主应用中监听消息
window.addEventListener('message', function(event) {
  if (event.origin === 'http://localhost:8080') { // 确保来源正确
    if (event.data.type === 'CUSTOM_EVENT') {
      console.log('Received message:', event.data.payload);
    }
  }
});

使用 EventBus 发送事件

假设有一个事件总线，子应用可以通过它发送和接收事件：

// 在子应用 app1 中注册事件监听器
window.__WUJIE__.on('CUSTOM_EVENT', function(data) {
  console.log('Received event:', data);
});

// 在主应用或其他子应用中发送事件
window.__WUJIE__.emit('CUSTOM_EVENT', { message: 'Hello from main app!' });

使用 Props 传递数据

主应用可以向子应用传递数据：

// 主应用配置
const wujie = new Wujie({
  container: '#app',
  apps: [
    {
      name: 'app1',
      entry: '//localhost:8080',
      activeRule: '/app1',
      props: {
        message: 'Hello from the main app!'
      }
    }
  ]
});

// 子应用 app1 接收数据
console.log(window.__WUJIE__.getProps().message); // 输出 "Hello from the main app!"

四、与qiankun的对比

与另一款流行的微前端框架 qiankun 相比，无界在子应用通信方面有以下优势：

更灵活的通信方式：无界提供了多种通信方式，包括 postMessage、EventBus 和 Props 传递，而 qiankun 主要依赖于 postMessage 和一些扩展API。
更高的安全性：无界通过 iframe 沙箱提供更强的安全隔离，这有助于保护子应用不受恶意代码的影响。
更精细的控制：无界提供了更细粒度的控制选项，例如可以控制子应用何时加载和卸载，这对于优化性能和资源管理非常重要。