首先声明乾坤很好,生态很成熟,作为一个久战沙场的框架,已经非常好用了,我有好几个项目都是基于乾坤搭建的,并且到生产环境中的表现很好,可圈可点。
qiankun stars:
需求
最近公司有一个任务,代码拆分,之前有几个项目的代码杂糅到一块了,导致我修改A项目,B项目也会重新部署,收到影响。
为了方便产品的售卖部署,需要把这几个应用拆开。
我尼玛一看这不就是umi项目,改成微前端,开干!!
qiankun踩坑
umi项目改成微前端项目,这tm妥妥的使用乾坤呀,一键即成,开箱即用,方便的很。
主应用修改,主子应用一通修改,主应用成功引入子应用的页面了,我寻思着大功告成了,一看样式崩,功能崩,各种崩。
umi/max中侧边栏样式崩溃
layout中配置如下: 展示侧边栏导航
headerHeight: 0,
splitMenus: true,
layout: 'mix',
字应用图片没有加载
需要配置publicPath
publicPath: ''
样式冲突
开启严格模式,全局变量是通过 :root
选择器来作用到根节点的,但是在 shadow dom 中,是无法通过 :root
来选中根节点的,也就导致了这部分的样式失效
解决:在 shadow dom 中也是存在根节点的,这个根节点名为 shadow host,我们可以用 :host
来代替 :root
选中 shadow dom 对应的根节点
umijs/max中修改不生效
umijs/max中使用public下的文件,使用webpack打包后的资源路由不会替换publicPath
chainWebpack(config) {
// 配置图片资源处理
config.module
.rule('images')
.test(/.(png|jpe?g|gif|webp)$/i)
.type('asset/resource') // 使用 Webpack 5 的资源模块处理
.set('generator', {
filename: 'img/[name].[hash:8].[ext]',
publicPath: 'http://localhost:8000/', // 自定义的 publicPath
});
},
x6在qiankun的严格模式下事件监听失效
以上都还好,凑活能用,但是antd x6画布的监听失效, 我测试删除节点没有任何反应,那一刻,我心里默念一声,wcnmd,具体原因还有待研究,但是太耗时间了。一直才解决bug,各种冲突
Nginx转发
我寻思着这也没有什么特殊内容啊,我拆出来后,匹配路由,用nginx转发岂不是更好,子应用之间路由前缀有明确区分。
当然有很多弊端,比如主子应用无法通信,子应用之间无法通信等等,但是我的现状是不用通信,没有那么复杂。
那就只剩下样式冲突,以及公用组件的问题
1、umi/max样式问题。
通过不同路由添加不同rootContainer,然后在:root #kkk-wrapper{}
// 通过这里做的样式隔离 在globa.less中 :root #kkk-wrapper{}
export function rootContainer(container: React.ReactNode) {
const curID = "kkk-wrapper" // 根据路由动态添加
return (
<div id={curID}>{container}</div>
);
}
2、公共组件问题。
一共就6-7个公共组件,直接复制用就行,后面多的话可以考虑npm包,或者单开仓库等形式
总结
qiankun很好,但是一个项目从开始就是微前端项目会好很多,当项目一开始不是qiankun的时候,后续把庞大的项目拆分成微前端项目的时候,阻力很大,如果有足够时间与耐心,自然拆成qiankun的微前端项目会好一点,但是如果为了qiankun而qiankun,那就本末倒置了。
一定要我们的目的,如果仅仅为了独立部署,强行上qiankun,那有点没必要了。\
其实大部分情况iframe已经搞定,使用nginx转发也能搞定。