微前端qiankun坑点总结

背景概述

由于一个后台项目整合了多个系统，并且由多个团队共同维护，项目开发迭代排期及测试、上线的时间节点都不一样，并且后台项目前端代码都在一个git仓库，使得不同团队不同功能代码合并冲突不断并不易统一版本，开发测试也相互影响。其二，项目在同一个服务上代码体积变得越来越大，部署时间变慢。此外相同服务下的公共代码体积也会变大，进而会影响页面加载速度。因此非常有必要将前端微服务化，经过一系列调用及综合项目本身情况，采用微前端框架qiankun，拆分项目为多个微应用，解决上述项目中的痛点问题。

微前端如何解决上述项目中的痛点问题？

1）解构巨石应用：微前端方案，最优先解决的应该就是解构巨石应用。为其解构过程中常会遇到的隔离性、依赖去重、通信、应用编排等问题提供解决方案。

2）独立仓库、独立开发：不同团队负责单独的微应用，独立的代码仓储，独立开发负责的微应用，相互不影响。

3）独立部署：采用微前端的架构方案，由于各为独立的微应用，所以应用都有自己的持续交付流水线（包括构建、测试并部署到生产环境），并且要能独立部署，不必过多考虑其它代码库和交付流水线的当前状态。

微前端qiankun的一些坑点总结？

1. 静态资源引用问题

问题：静态资源再子应用中相对路径引用，主应用下可能无法读取到

微应用打包之后css中字体和背景图片404 (原因是 qiankun 将外链样式改成了内联样式，但是字体文件和背景图片的加载路径是相对路径。而 css 文件一旦打包完成，就无法通过动态修改 publicPath 来修正其中的字体文件和背景图片的路径)

解决方案：小图base64位，大图上传资源服务器，其他资源同样使用绝对路径引用。

(1).所有图片等静态资源上传至 cdn，css 中直接引用 cdn 地址（推荐）

(2).借助 webpack 的 url-loader 将字体文件和图片打包成 base64（适用于字体文件和图片体积小的项目）（推荐）

2. 通信数据初始化覆盖问题

// initGlobalState() 的写法会覆盖掉已经初始化定义的一级属性

JavaScript

const { setGlobalState }  = initGlobalState()

const { setGlobalState }  = initGlobalState()

解决方案：在统一的位置定义一级属性，将通信方法导出后挂载到window上供全局调用：

JavaScript

const { setGlobalState }  = initGlobalState({
  demoData: '',
  demo2Data: ''
})
window.$setGlobalState = setGlobalState

// 需要通信更新更新demoData处调用示例：
window.$setGlobalState({
  demoData: 'this is demo'
})

const { setGlobalState }  = initGlobalState({
  demoData: '',
  demo2Data: ''
})
window.$setGlobalState = setGlobalState

// 需要通信更新更新demoData处调用示例：
window.$setGlobalState({
  demoData: 'this is demo'
})