微前端

• 目的/核心 - 并不是要达到所有 - 需要权衡
  • 垂直切分前端
  • 技术无关 - 可混合多种框架
  • 团队切分 - 独立
  • 外部依赖共享 - React - Import Map
  • 独立部署 - 能部署某个组件或页面
• 附加
  • SSR 支持 - 按照路由切分是可能的
• 反应 microservice 概念 - isolation
• 参考
  • Web Component
  • micro-frontends.org
    • 核心思想
      • 技术不可知
      • 隔离团队之间的代码
        • 不要共享运行时环境
      • 建立团队自己的前缀
      • 原生浏览器标准优先于框架封装的 API
      • 构建高可用的网络应用
  • single-spa Recommended Setup
  • qiankun
    • 基于 single-spa

微前端划分点

• 路由 - 营销网站 - NextJS
• 页面布局 - 后端
  • 例如 iframe - 划分多区域
  • 例如 每个区域 mount 一个 webcomponent
  • 例如 react 每个区域 switch 一个 sub path - 基于内部路由
• 功能模块 - 高度定制场景 - 例如 单页多 App
  • 通过自定义注册信息识别 registry({name:'',load:()=>{}})
• 代码模块 - 自定义场景，使用 systemjs 构建应用
  • 通过 import @my-sys/module 识别

实现方案

• iframe
• NextJS multi-zone
  • url 切分
  • 支持 SSR - 适用于营销场景
• single-spa
  • URL 切分、layout 模块
  • bootstrap、mount、unmount 钩子
  • 监听 url 变化
  • 语言无关
• qiankun
  • 基于 single-spa 封装
  • Proxy 沙箱隔离访问全局对象
• systemjs/systemjs
  • 自行映射模块实现，systemjs 用于系统维度协调
• webpack federation #10352
• import map - Import maps
• bundle 外部依赖
  • webpack external
  • rollup external
• WebComponent
  • 封装组件、语言无关
  • ShadowDom 挑实现框架
  • 组件样式是否需要隔离待商榷
• opencomponents/oc
• micro-zoe/micro-app
  • 京东
  • 基于 CustomElement，类似 iframe 设计体验
  • connectedCallback

importmap

<!-- The import map is inlined into your page -->
<script type="importmap">
  {
    "imports": {
      "/path/to/kv-storage-polyfill.mjs": ["std:kv-storage", "/path/to/kv-storage-polyfill.mjs"]
    }
  }
</script>

<!-- Then any module scripts with import statements use the above map -->
<script type="module">
  import storage from '/path/to/kv-storage-polyfill.mjs';

  // Use `storage` ...
</script>

FAQ

ShadowDom 样式受全局影响

• 一般样式使用 rem
  • 受 html font-size 影响
  • 默认 16px
• 建议 ShadowDom 的时候最好使用 px
• 如果是自己的环境，可保留使用 rem - 方便 user-agent 控制字体大小

microservice vs microfrontend

• 微服务 vs 微前端
• 微服务
  • 功能性服务、聚合性服务
  • 通过 rpc/http/反向代理 方式路由
  • rpc - version+service name+method name
  • http - host+path
  • 通过序列化的请求沟通 - 传递数据
  • service mesh - Observability, Security, Reliability
    • 前端不需要关心 - 类似 sentry
• 微前端
  • 单个页面
    • 拆分代码逻辑结构
  • 单个网站
    • 基于 URL 路由
    • 实现部分逻辑共享
    • SAP
    • SSR
  • 比微服务更复杂 - 交互、结构
  • 比微服务更简单 - 治理