/micro-front

微前端实战，single-spa，qiankun，源码分析

Primary LanguageJavaScript

一、为什么需要微前端

微前端就是将不同的功能按照不同的维度拆分成多个子应用，通过主应用来加载这些子应用

微前端的核心在于拆，拆完后再合

Why？

  • 不同团队间开发同一个应用技术栈不同怎么办？
  • 希望每个团队都可以独立开发，独立部署怎么办？
  • 项目中还需要老的应用代码怎么办？

我们是不是可以将一个应用划分成若干个子应用，将子应用打包成一个个的 lib，当路径切换时加载不同的子应用。这样每个子应用都是独立的，技术栈也不用做限制了，从而解决了前端协同开发的问题

怎么落地微前端？

single-spa

  • 实现了路由劫持和应用加载
  • 没有处理样式隔离，js执行隔离

qiankun

基于single-spa，提供了更加开箱即用的api（single-spa + sandbox + import-html-entry），做到了与技术栈无关，并且接入简单（像iframe一样简单）

总结：子应用可以独立构建，运行时动态加载，主子应用完全解耦，技术栈无关，靠的是协议接入（子应用必须导出bootstrap、mount、unmount方法）

应用通信

  • 基于URL来进行数据传递，但是传递消息能力弱
  • 基于 CustomEvent 实现通信
  • 基于 props 主子应用间通信
  • 使用全局变量、redux进行通信

公共依赖

  • CDN - externals
  • webpack5 模块联邦

二、single-spa 实战

如何确保主应用跟微应用之间的样式隔离

沙箱？

  • Proxy
  • 快照沙箱？