icestark icon indicating copy to clipboard operation
icestark copied to clipboard

[RFC]icestark 支持应用级别 Keep-Alive

Open ClarkXia opened this issue 4 years ago • 0 comments

微前端 Keep Alive  方案

微前端架构中的每次应用切换都将会执行上一个微应用的卸载的生命周期,如果想对微应用 Keep Alive 需要进行如下改造:

  • 微应用切换时不执行 unmount 生命周期
  • 将微应用当前渲染的组件实例进行缓存
  • 微应用再次渲染时,如果存在缓存内容,则直接通过 DOM 操作渲染缓存组件

方案

针对 icestark 微前端方案在 React 主应用使用场景上封装了 AppRouter 的方式,如果需要一键启用 Keep Alive 能力,则需要 AppRouter 内部支持或者提供相应的钩子函数来完成上述改造要点

使用方式:

<AppRouter>
  <AppRoute {...rest} keepAlive />
</AppRouter>

存在的问题:

  • 微应用切换后,实际没有进行卸载,会出现多应用共存的问题,导致脚本和样式的冲突问题凸显
  • cache 整体应用的 node,对于内存会有比较高的占用

https://github.com/alibaba/ice/issues/3875

ClarkXia avatar Jan 28 '21 09:01 ClarkXia