一文带你搞懂微前端框架wujie运行模式

217 阅读2分钟

运行模式介绍

Wujie 的运行模式主要分为以下三种:

  1. 保活模式:当子应用的 alive 参数设置为 true 时进入保活模式。此模式下,子应用只会进行一次渲染,页面切换时子应用的 DOM 会被保留在内存中,重新激活时直接挂载到容器上。子应用路由不会随 URL 变化而改变,需要通过通信方式跳转路由
  2. 单例模式:当子应用的 alive 参数为 false 且进行了生命周期改造时进入单例模式。子应用页面切换时,会销毁当前实例并创建新的实例,同时路由会跳转到对应 URL
  3. 重建模式:当子应用未设置保活模式且未进行生命周期改造时进入重建模式。每次页面切换都会销毁子应用的 DOM 和 iframe,子应用实例和 Wujie 实例也会被销毁。路由变化后,子应用会重新渲染

优劣对比及适用场景建议

1. 保活模式

  • 优势:
    • 子应用只会渲染一次,DOM 和状态会保留在内存中,切换时性能开销小。
    • 子应用实例不会销毁,可以持续响应事件。
  • 劣势:
    • 内存占用较高,长时间运行可能导致内存泄露。
    • 路由不会随 URL 变化,需要通过通信方式跳转。
  • 适用场景:
    • 需要频繁切换且保持状态一致的子应用(如后台管理系统中的 Tab 页)。

2. 单例模式

  • 优势:
    • 子应用实例会在切换时销毁和重建,资源占用较低。
    • 支持路由跳转,适合多页面场景。
  • 劣势:
    • 每次切换会触发销毁和重新渲染,性能开销较大。
  • 适用场景:
    • 主应用中包含多个页面共享同一子应用实例的场景(如多菜单共用子应用)。

3. 重建模式

  • 优势:
    • 每次切换都会彻底销毁子应用,资源占用最低。
    • 路由跳转简单直观,适合独立页面场景。
  • 劣势:
    • 每次切换都会重新渲染,性能开销最大。
    • 无法保留子应用状态。
  • 适用场景:
    • 子应用状态不重要、且切换频率较低的场景(如一次性展示的独立页面)。

根据业务场景选择模式的建议:

  • 需要保持状态且频繁切换:选择保活模式。
  • 多页面共享子应用且需要路由跳转:选择单例模式。
  • 一次性展示且无需保留状态:选择重建模式。

参考文档:无界官方文档 —— wujie运行模式