腾讯无界微前端框架介绍

problc

于 2024-08-21 09:23:20 发布

阅读量330

点赞数 5

文章标签：微前端

本文链接：https://blog.csdn.net/problc/article/details/141380462

版权

一、无界微前端框架概述

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

技术实现

无界微前端的核心技术是基于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 沙箱提供更强的安全隔离，这有助于保护子应用不受恶意代码的影响。
更精细的控制：无界提供了更细粒度的控制选项，例如可以控制子应用何时加载和卸载，这对于优化性能和资源管理非常重要。

总结

无界微前端框架通过提供多样化的通信机制，简化了子应用之间的通信流程，使得开发人员可以轻松地构建出高度可扩展且维护性良好的微前端应用。与 qiankun 相比，无界在通信灵活性和安全性方面具有显著优势。

problc

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
腾讯无界微前端框架介绍

无界微前端框架是由腾讯团队推出的，旨在解决现有微前端方案中存在的问题，如适配成本高、样式隔离困难、运行性能不佳、页面白屏、子应用通信复杂、子应用保活机制缺乏等。无界微前端框架通过提供多样化的通信机制，简化了子应用之间的通信流程，使得开发人员可以轻松地构建出高度可扩展且维护性良好的微前端应用。与 qiankun 相比，无界在通信灵活性和安全性方面具有显著优势。
复制链接

扫一扫