复杂 APP 构架

挑战:跨部门,跨技术,项目拆分
最佳方案实现独立运行、独立开发、独立部署,也叫微前端


方案:
iframe
  • 使用全局组件(e.g: 模态弹窗)难度大 // 包括 url
  • 容易独立调试,发布
  • 可能依赖"第三方 cookie"未被禁用
  • 重复的依赖
  • 占用的资源可以卸载
  • 需要额外的域名或路由配置
  • 不能支持 SEO

web component
  • 宿主环境需要实现加载方式,解决缓存引入等问题
  • 重复的依赖 // 看部署方式
  • 自定义元素重复风险 // 元素名称带版本号
  • Error 只能通过宿主环境处理
  • 不能支持 SEO

react/vue app
  • 宿主环境需要实现加载方式,解决缓存引入等问题
  • 重复的依赖 // 看部署方式
  • Error 只能通过宿主环境处理
  • 脚本/样式可能影响宿主环境

模块化宿主环境
  • 客户端渲染 SPA
  • 以公共模块的方式在主体项目中引用
  • 一级路由之间的跳转是传统的页面跳转
  • 有微服务的好处
  • 以模块的方式引用主体
  • 开发时看不到宿主环境
  • 在主体项目中需要主动向宿主注册自己
  • 服务端模板渲染的传统页面