使用micro-app 多层嵌套的问题

micro-app 多层嵌套问题解决方案

版本说明 ：本文讨论的 micro-app 版本为截止发稿日期的最新版 1.0.0-rc.27。

一、问题背景

1.1 业务场景

在实际开发中，我们遇到了一个三层嵌套的微前端场景：

基座应用 → 中间应用 → 子应用

• 技术栈：Vue 3 + Vite
• 架构层级：三层嵌套结构
• 业务需求：中间应用和子应用需要进行频繁的数据交互

1.2 官方文档说明

micro-app 官方文档针对 Vite 项目给出了使用 iframe 模式的建议： 官方文档虽然提到了支持多层嵌套，但并未给出具体的实现示例和注意事项：

1.3 问题现象

当中间层应用使用 iframe 模式时，第三层子应用会出现**栈溢出（Stack Overflow）**错误：

Maximum call stack size exceeded

这个问题在 GitHub Issues 中也有多人反馈，但官方尚未给出明确的解决方案。

---

二、问题原因分析

2.1 根本原因

经过深入分析和测试，问题的根本原因如下：

1. 资源查找机制问题 ：当基座应用和中间层应用都启用 iframe 模式后，第三层子应用在查找 iframe 标签资源时，会向上查找父级应用。

2. 循环查找导致栈溢出：

   • 第三层应用向上查找时，找到的是基座应用而非中间层应用
   • 基座应用再次下发资源
   • 第三层应用继续向上查找
   • 形成无限循环，最终导致栈溢出

3. iframe 标签的资源查找逻辑 ：micro-app 在处理 Vite 项目的 iframe 模式时，资源查找机制在多层级嵌套场景下存在缺陷。

2.2 测试验证

我们对不同技术栈和框架进行了测试，测试结果如下：

基座应用	中间应用	子应用	是否出现栈溢出
Vite + iframe	Vite + iframe	Vite	❌ 是
Vite + iframe	Vite + iframe	Webpack	❌ 是
Vite + iframe	Webpack	Vite	✅ 否
Vite + iframe	Webpack	Webpack	✅ 否

结论 ：不论第三层使用什么技术栈，只要第二层（中间应用）使用了 iframe 模式，就会出现栈溢出问题。

---

三、解决方案

方案一：使用原生 iframe 标签（不推荐）

实现方式

第三层子应用使用原生的 <iframe> 标签，而不是 micro-app 标签。

优点

• ✅ 完全避免栈溢出问题
• ✅ 实现简单，无需额外配置

缺点

• ❌ 失去了 micro-app 的所有优势（样式隔离、JS 沙箱、通信机制等）
• ❌ 需要重新实现微前端的各种能力
• ❌ 与现有架构不兼容，需要大量改造工作
• ❌ 性能较差，用户体验不佳

适用场景

仅适用于对微前端能力要求不高的简单嵌入场景。 不需要频繁的进行数据交互及ui风格统一等。

---

方案二：中间层不使用 iframe 模式（不推荐）

实现方式

中间层应用不使用 iframe 模式，改用 Webpack 构建或其他方式。

优点

• ✅ 可以避免栈溢出问题
• ✅ 保持 micro-app 的完整能力

缺点

• ❌ 需要将 Vite 项目改回 Webpack，技术倒退
• ❌ 失去 Vite 的快速构建和开发体验
• ❌ 不符合当前主流技术趋势
• ❌ 团队需要重新学习 Webpack 配置

适用场景

仅适用于可以接受技术栈变更的项目。

---

方案三：第三层使用基座应用的标签（推荐⭐）

这是本文重点推荐的解决方案，通过让第三层子应用直接使用基座应用的 micro-app 标签，绕过中间层的资源查找问题。

3.1 核心思路

• 第三层子应用不再通过中间层应用加载
• 直接使用基座应用的 micro-app 标签进行渲染
• 通过基座应用实现中间层和子应用之间的通信

3.2 实现步骤

步骤一：将基座应用的 micro-app 挂载到全局

在基座应用中，将 micro-app 实例挂载到全局对象，以便子应用能够访问：

// 基座应用：main.js 或 bootstrap.js
import microApp from '@micro-zoe/micro-app';

// 权限校验函数（可选）
function accessMicroAppName(appName) {
  // 根据业务需求实现权限校验逻辑
  // 例如：检查当前子应用是否有权限访问指定的子应用
  return true;
}

// 将 micro-app 方法挂载到全局
window.microApp = {
  setData(...args) {
    if (!accessMicroAppName(args[0])) {
      return;
    }
    microApp.setData(...args);
  },

  addDataListener(...args) {
    if (!accessMicroAppName(args[0])) {
      return;
    }
    microApp.addDataListener(...args);
  },

  getData(...args) {
    if (!accessMicroAppName(args[0])) {
      return null;
    }
    return microApp.getData(...args);
  },

  removeDataListener(...args) {
    if (!accessMicroAppName(args[0])) {
      return;
    }
    microApp.removeDataListener(...args);
  },
};

注意事项：

• 建议添加权限校验，防止子应用越权访问
• 可以根据业务需求选择性暴露方法

步骤二：基座应用设置动态标签名称

基座应用在初始化时，设置动态标签名称，并通过 setGlobalData 传递给子应用：

// 基座应用：micro-app 初始化
import microApp from '@micro-zoe/micro-app';

// 定义动态标签名称常量
const MICRO_APP_TAGNAME = 'micro-app-base';

// 初始化 micro-app
microApp.start({
  tagName: MICRO_APP_TAGNAME, // 使用自定义标签名
  lifeCycles: {
    // 生命周期钩子
  },
  preFetchApps: [
    // 预加载应用列表
  ],
});

// 通过 setGlobalData 将标签名传递给子应用
microApp.setGlobalData({
  microAppTagName: MICRO_APP_TAGNAME,
});

子应用接收

步骤三：中间层应用创建动态组件

在中间层应用中，创建一个动态组件，使用基座应用的标签名称：

<!-- 中间层应用：MicroApp.vue -->
<template>
  <component
    :is="microAppTagName"
    :name="appName"
    :url="appUrl"
    :default-page="embedPath"
    :data="appData"
    @datachange="handleDataChange"
  />
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';

interface Props {
  appName: string;
  appUrl: string;
  embedPath?: string;
  appData?: Record<string, any>;
}

const props = defineProps<Props>();

// 从全局数据中获取基座应用的标签名
const microAppTagName = ref<string>('micro-app');

// 监听全局数据变化，获取标签名
onMounted(() => {
  if (window.microApp) {
    window.microApp.addDataListener((data: any) => {
      if (data?.microAppTagName) {
        microAppTagName.value = data.microAppTagName;
      }
    }, true); // true 表示立即执行一次

    // 获取初始数据
    const globalData = window.microApp.getData();
    if (globalData?.microAppTagName) {
      microAppTagName.value = globalData.microAppTagName;
    }
  }
});

const handleDataChange = (e: CustomEvent) => {
  // 处理子应用数据变化
  emit('dataChange', e.detail.data);
};

const emit = defineEmits(['dataChange']);
</script>

简单版：

步骤四：使用动态组件并传递参数

在中间层应用的页面中，使用动态组件：

<!-- 中间层应用：使用示例 -->
<template>
  <div class="sub-app-container">
    <MicroApp
      :app-name="subAppName"
      :app-url="subAppUrl"
      :default-page="embedPath"
      :app-data="appData"
      @data-change="handleSubAppDataChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import MicroApp from './MicroApp.vue';

const subAppName = ref('sub-app-name');
const subAppUrl = ref('https://sub-app.example.com');
const embedPath = ref('/page1'); // 通过 default-page 传递路由参数
const appData = ref({});

// 监听参数变化，更新子应用
watch(embedPath, (newPath) => {
  // 参数变化时，子应用会自动更新
});

const handleSubAppDataChange = (data: any) => {
  // 处理子应用数据变化
  console.log('子应用数据变化:', data);
};
</script>

简版：

步骤五：实现参数传递和数据通信

中间层应用通过基座应用的 setData 方法向子应用传递数据：

// 中间层应用：参数传递
import { ref } from 'vue';

const embedPath = ref('/page1');

// 更新子应用参数
const updateSubAppPath = (newPath: string) => {
  embedPath.value = newPath;

  // 通过基座应用向子应用传递数据
  if (window.microApp) {
    window.microApp.setData(subAppName.value, {
      path: newPath,
      timestamp: Date.now(),
    });
  }
};

// 监听子应用数据变化
if (window.microApp) {
  window.microApp.addDataListener((data: any) => {
    console.log('收到子应用数据:', data);
    // 处理子应用返回的数据
  }, subAppName.value);
}

3.3 方案优势

• ✅ 解决栈溢出问题：第三层直接使用基座应用的标签，绕过中间层的资源查找
• ✅ 保持微前端能力：仍然可以使用 micro-app 的所有功能
• ✅ 支持频繁交互：通过基座应用实现中间层和子应用之间的数据通信
• ✅ 避免白屏问题：子应用不会因为参数变化而重新加载，提升用户体验
• ✅ 支持多子应用：每个子应用都可以使用独立的标签，互不干扰
• ✅ 技术栈兼容：支持 Vite + Vue 3 技术栈

3.4 注意事项

1. 通信机制：中间层应用和子应用的通信需要通过基座应用进行，不能直接通信
2. 权限控制：建议在基座应用中实现权限校验，防止子应用越权访问
3. 标签名称：确保基座应用的标签名称唯一，避免冲突
4. 数据管理：需要合理设计数据传递机制，避免数据混乱

3.5 架构示意图

┌─────────────────────────────────────┐
│           基座应用                   │
│  ┌───────────────────────────────┐  │
│  │  micro-app (tagName: 'base')  │  │
│  │  ┌─────────────────────────┐  │  │
│  │  │    中间层应用             │  │  │
│  │  │  ┌───────────────────┐  │  │  │
│  │  │  │  动态组件          │  │  │  │
│  │  │  │  <base>           │  │  │  │
│  │  │  │    ┌───────────┐  │  │  │  │
│  │  │  │    │ 子应用    │   │  │  │  │
│  │  │  │    └───────────┘  │  │  │  │
│  │  │  └───────────────────┘  │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

---

四、方案对比

方案	解决栈溢出	保持微前端能力	技术栈兼容	实现复杂度	推荐度
方案一：原生 iframe	✅	❌	✅	⭐⭐	⭐
方案二：中间层不用 iframe	✅	✅	❌	⭐⭐⭐	⭐⭐
方案三：使用基座标签	✅	✅	✅	⭐⭐⭐⭐	⭐⭐⭐⭐⭐

---

五、总结

5.1 问题根源

micro-app 1.x 版本在处理 Vite 项目的多层嵌套场景时，当中间层应用使用 iframe 模式，会导致第三层子应用在资源查找时出现循环查找，最终引发栈溢出。

5.2 最佳实践

推荐使用方案三 ：让第三层子应用直接使用基座应用的 micro-app 标签，通过基座应用实现中间层和子应用之间的通信。这样既解决了栈溢出问题，又保持了微前端的完整能力。

5.3 注意事项

1. 确保基座应用的标签名称唯一且可配置
2. 实现完善的权限校验机制
3. 合理设计数据传递和通信机制
4. 注意处理子应用的生命周期管理

5.4 未来展望

希望 micro-app 官方能够在后续版本中：

• 修复多层嵌套场景下的资源查找问题
• 提供更完善的多层嵌套示例和文档
• 优化 Vite 项目的 iframe 模式支持

---

六、参考资料

• micro-app 官方文档
• micro-app GitHub Issues
• Vue 3 官方文档
• Vite 官方文档

---