微前端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初始化定义一级属性,已经定义过的数据,注意不要书写为如下:
// initGlobalState() 的写法会覆盖掉已经初始化定义的一级属性 const { setGlobalState } = initGlobalState()
解决方案:在统一的位置定义一级属性,将通信方法导出后挂载到window上供全局调用:
const { setGlobalState } = initGlobalState({ demoData: '', demo2Data: '' }) window.$setGlobalState = setGlobalState // 需要通信更新更新demoData处调用示例: window.$setGlobalState({ demoData: 'this is demo' })3. 静态资源跨域问题
问题:配置的子应用报跨域错误 解决方案:由于 qiankun 是通过 fetch 去获取微应用的引入的静态资源的所以必须要求这些静态资源支持跨域。 如果是自己的脚本,可以通过开发服务端跨域来支持。如果是三方脚本且无法为其添加跨域头,可以将脚本拖到本地,由自己的服务器 serve 来支持跨域。
参考:Nginx配置跨域