🏠🏠🏠微前端我劝你千万别无脑冲qiankun

683 阅读3分钟

首先声明乾坤很好,生态很成熟,作为一个久战沙场的框架,已经非常好用了,我有好几个项目都是基于乾坤搭建的,并且到生产环境中的表现很好,可圈可点。

qiankun stars: image.png

需求

最近公司有一个任务,代码拆分,之前有几个项目的代码杂糅到一块了,导致我修改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转发也能搞定。