钉子的生活日记
文章目录

MicroApp 微前端学习笔记

适合目标：从零掌握 MicroApp 的接入方式、运行机制、使用边界和企业落地方法。
学习定位：这一份偏“低门槛接入 + 中后台落地 + 面试表达”。
学习原则：先会用，再理解隔离和通信，最后做工程治理。

目录

  1. MicroApp 是什么
  2. 为什么很多团队会选它
  3. 核心原理速览
  4. 基础接入流程
  5. 主应用与子应用通信
  6. 路由、样式、静态资源处理
  7. 进阶能力与工程治理
  8. 常见问题排查
  9. 适用与不适用场景
  10. 面试考点
  11. 一页总结

1. MicroApp 是什么

MicroApp 是一个偏运行时托管型的微前端方案。
它的目标很明确：

  1. 接入简单
  2. 多技术栈兼容
  3. 对子应用侵入较低
  4. 让主应用像使用组件一样使用子应用

常见使用方式长这样：

<micro-app
  name="order-app"
  url="https://child.example.com/"
  baseroute="/order"
></micro-app>

可以先把它理解成：

主应用提供一个微应用容器，容器负责资源加载、生命周期和通信。

2. 为什么很多团队会选它

2.1 优势

  1. 接入直观
  2. 多框架兼容性不错
  3. 对老项目比较友好
  4. 通信 API 易上手
  5. 适合中后台快速落地

2.2 典型使用团队画像

  1. 业务线较多
  2. 子系统相对独立
  3. 研发更关心效率而不是极致底层定制
  4. 需要在 Vue2、Vue3、React 之间平滑共存

3. 核心原理速览

3.1 资源加载

MicroApp 会负责拉取子应用入口资源，并在容器中完成渲染和执行。

3.2 应用容器化

主应用通过 micro-app 标签或对应能力，把子应用当成一个业务容器进行挂载。

3.3 沙箱隔离

核心目标是避免子应用污染全局环境，常见治理对象包括：

  1. window
  2. 事件监听
  3. 定时器
  4. 样式作用域

3.4 数据通信

MicroApp 提供主子通信能力，减少团队自己造轮子。

3.5 生命周期

你可以把它理解成：

  1. 注册
  2. 加载
  3. 挂载
  4. 更新
  5. 卸载

4. 基础接入流程

4.1 主应用安装与初始化

伪代码示意：

import microApp from '@micro-zoe/micro-app'

microApp.start({
  iframe: true
})

这里的配置项可能随着版本和场景不同而变化，但你需要记住初始化的核心目的：

  1. 启动框架能力
  2. 定义沙箱或路由策略
  3. 注册全局钩子

4.2 主应用渲染子应用

<micro-app
  name="user-center"
  url="http://localhost:3001"
  baseroute="/user"
  keep-router-state
></micro-app>

关键字段要理解：

  1. name：子应用唯一标识
  2. url：子应用地址
  3. baseroute：主应用分配给子应用的基础路由

4.3 子应用需要做什么

子应用通常要处理这些事情：

  1. 设置正确的路由 base
  2. 兼容主应用下的静态资源路径
  3. 暴露挂载逻辑或按规范运行
  4. 避免强依赖顶级域路由

4.4 一个最小接入步骤

  1. 主应用初始化 MicroApp
  2. 主应用注册子应用容器
  3. 子应用配置基础路由
  4. 打通主子应用跨域和资源地址
  5. 验证加载、跳转、卸载

5. 主应用与子应用通信

5.1 为什么通信不能乱做

微前端里最容易失控的一件事就是：

子应用之间直接互调，最后变成分布式单体前端。

所以建议：

  1. 主应用作为通信中枢
  2. 全局共享数据保持最小
  3. 复杂业务数据走后端接口

5.2 常见通信方式

  1. 主应用下发全局数据
  2. 子应用上报事件
  3. 订阅式数据变化
  4. 命令式调用少量保留

5.3 推荐共享内容

  1. 用户信息
  2. 权限信息
  3. 主题配置
  4. 国际化语言
  5. 埋点上下文

5.4 不推荐共享内容

  1. 大型业务表单状态
  2. 页面局部缓存
  3. 子应用私有领域对象
  4. 复杂流程状态机

6. 路由、样式、静态资源处理

6.1 路由治理

推荐原则：

  1. 主应用控制一级路由
  2. 子应用控制内部子路由
  3. 每个子应用有明确前缀
  4. 避免多个子应用争抢同一路由片段

6.2 样式隔离

微前端最常见问题之一就是 CSS 污染。建议：

  1. 所有子应用使用独立根节点命名空间
  2. 组件库主题变量统一规划
  3. 不在子应用里做全局 reset 覆盖
  4. 避免裸写 body、html、a、div

6.3 静态资源问题

你需要提前处理：

  1. publicPath
  2. 图片字体等资源地址
  3. 动态 import 的 chunk 路径
  4. 本地开发与生产环境地址差异

如果这个环节不处理好，就会出现：

  1. 子应用资源 404
  2. 刷新后丢失
  3. 路由深链访问失败

7. 进阶能力与工程治理

7.1 keep-alive 思路

某些中后台页面切换频繁，完全卸载再加载成本高。
这时可以考虑缓存子应用实例或路由状态，但要控制：

  1. 内存占用
  2. 数据过期
  3. 页面副作用残留

7.2 预加载

常见做法：

  1. 用户登录后预加载高频子应用
  2. 鼠标 hover 菜单时预加载
  3. 按角色权限预加载

预加载的目标不是全量下载，而是：

把最可能打开的应用提前准备好。

7.3 统一鉴权

推荐策略：

  1. 登录态由主应用统一管理
  2. 子应用只消费鉴权结果
  3. 权限码、菜单、按钮权限统一分发
  4. 退出登录由主应用统一回收

7.4 统一监控

必须做的监控点：

  1. 子应用加载耗时
  2. 子应用渲染异常
  3. 资源加载失败
  4. 路由跳转失败
  5. JS 运行错误

7.5 发布治理

  1. 每个子应用独立版本号
  2. 支持灰度发布
  3. 支持快速回滚
  4. 主应用和子应用版本解耦

8. 常见问题排查

8.1 子应用样式污染主应用

排查方向：

  1. 是否存在全局选择器
  2. 是否引入了全局样式库
  3. 是否对子应用根节点做了命名空间隔离

8.2 子应用卸载后事件没清理

排查方向：

  1. window.addEventListener 是否成对移除
  2. 定时器是否清理
  3. 订阅和全局监听是否释放

8.3 刷新页面 404

排查方向：

  1. Nginx history fallback
  2. 主子应用路由 base 配置
  3. 子应用静态资源地址

8.4 子应用本地联调困难

改进建议：

  1. 统一开发端口约定
  2. 统一代理配置
  3. 统一环境变量命名
  4. 统一启动脚本

9. 适用与不适用场景

9.1 适用

  1. 中后台管理系统
  2. 多业务域平台
  3. 老系统渐进迁移
  4. 多技术栈并存

9.2 不适用

  1. 极致强调首屏性能的小型页面
  2. 纯组件共享诉求而非整应用托管
  3. 技术栈统一且团队规模很小的项目

10. 面试考点

10.1 为什么选择 MicroApp

答题要点：

  1. 接入成本低
  2. 兼容老项目
  3. 通信和容器模型直观
  4. 适合快速落地平台型系统

10.2 MicroApp 的核心问题是什么

  1. 子应用资源加载
  2. 主子应用通信
  3. 路由 base 处理
  4. 样式与运行环境隔离

10.3 你们如何治理主子应用通信

推荐回答：

只共享少量全局信息，主应用作为中枢，复杂业务数据走服务接口，避免子应用直接互相依赖。

10.4 怎么避免微前端系统变得更乱

  1. 制定接入规范
  2. 统一监控
  3. 统一鉴权
  4. 明确边界
  5. 建设发布与调试基础设施

11. 一页总结

11.1 MicroApp 的定位

更偏务实落地型微前端方案，强调低心智负担和较低改造成本。

11.2 适合谁

  1. 想快速上微前端的中后台团队
  2. 有老系统兼容诉求的团队
  3. Vue 体系较多的团队

11.3 记忆口诀

先把子应用当容器接进来，再治理路由、通信、隔离和发布。