早早聊 C7 笔记 - 【宋小菜】伟林：如何分三步实施微前端

# 微前端认知史

微前端不是银弹，它并没有多么高深莫测。

# 为什么需要微前端

# 业务价值

• 内部应用太多
• UI 风格不一致
• 多应用操作断层

# 工程价值

• 统一管理
• 模块拆分、多人协作
• 发布提速

# 调研到落地实践

# 可能遇到的问题

• 全局的样式冲突
  • Shadow DOM
  • CSS Scope
  • CSS in JavaScript
• JavaScript 污染
  • tc39/proposal-realms
• 某些库多版本
  • Externals -> DLL

# 拆解的粒度

# 应用集成

• 使用

• 简单模式
  • 整页覆盖渲染 + 导航器浮层
• 精细模式
  • 提供 Content 渲染区域给子应用
    • 协定菜单数据结构，注给子应用 menuService
    • 提供自定义 Menu、Header、 Footer 的自定义接口
    • 注入统一请求库，利用 LRU 策略缓存接口

# 遇到的实际问题

• 重复配置
  • 将打包配置抽成解决方案（highway 插件）
• DLL
  • 不要忘了设置 DLL 的 libraryTarget （sandbox 源码）
• AntD Modal
  • getContainer 指定局部渲染的节点
• 父子通讯
  • props 在 子 mount 时传入
• 多 Store 共存
  • 利用 props 传入 context | storeKey

# 单体拆分

• 动态加载方案
  • 旧方案
    • Externals 简单粗暴，无法处理共存的版本
    • DLL 打包进模块，存在冗余的代码
  • Federation
    • 可以对依赖库做到版本控制、自动加载缺失的 vendor
    • 支持远程加载，解决了 npm link 在开发时不便利的问题
  • Getting Started With Federated Modules (opens new window)
• 落地实践

# 业务块划分

• 按照业务领域划分页面

# 发布

• 简单模式
  • 独立发布，加载固定 CDN 地址
• 精细模式 - 平滑上线
  • 版本机制
    • index.[hash].html
    • remoteEntry.[hash].js
    • 配置中心
  • 发布次序
    • 主应用最后发布

# 总结和规划

微前端不是银弹，适合的才是最好的，架构随业务增长演化

# 总体规划