之前在上家公司，看同事用qiankun把一个项目集成到了另一个项目中，而且并没有iframe引用项目的的割裂感，收获了大家满满的一波崇拜~ 其中也包括我。

终于，在最近的一次需求迭代中，有了微前端的用武之地。我赶紧毛遂自荐和产品友好沟通了一下，并确定了使用qiankun。

然后，就开始了漫长的遇到坑，填坑的过程~~~

正片开始

啥是微前端?qiankun又是啥？

微前端是一种前端架构模式，将一个大型的项目拆分成多个小项目，每个小项目都可以独立开发、测试和部署，最终通过类似于组件的方式组合成一个完整的项目。

single-spa是一个开源的微前端框架，qiankun是基于single-spa开发的框架，它提供了一套完整的微前端解决方案，包括子应用程序的注册、加载、通信和生命周期管理等功能。qiankun可以帮助开发人员快速搭建一个具有高可维护性、高可扩展性和高灵活性的前端项目。

哪些场景下，我适合用qiankun?

• 在一个远程仓库中协同开发，是一个SPA页面，项目基于路由渲染不同组件。但是项目体量过大，依赖包过多，导致webpack构建时间过长。
• 在多个仓库中，不同子应用独立SPA页面，用iframe嵌入，缺点是跳转不同子应用体验感割裂。
• 在多个仓库各自开发各自的，独立部署，是一个MPA页面，基于nginx解析为二级目录，每次点击新的路由，都会重新加载一个新项目，割裂感比iframe还严重。而且因为是一个完整项目，相似页面不能复用。
  

有以上三种常见的任意一种，都 ‘墙裂’ 推荐使用微前端(包括但不限于qiankun)进行优化。

qiankun快速应用到项目中

qiankun官网的项目实践：qiankun.umijs.org/zh/guide/tu…

小伙伴们不要焦虑，跟着教程无脑一步步的配置就行啦！教程比较详细，直接使用复制黏贴大法就完事。

项目实践中的踩坑和填坑方法

第一个坑

主应用：qiankun + vue2

子应用：qiankun + react

问题：项目首次加载，子应用展示正常。打开项目中的vue路由，展示正常。再打开子应用，整个页面都白了

原因：首次加载的时候是子应用就会触发, 首次加载是项目中的vue路由就没有这个问题

解决：

• 方案一：新建loading页面做中转，首次加载去loading页面，然后再去子应用
• 方案二：全局注册（registerMicroApps）子应用改为局部注册（loadMicroApp）
• 方案三：推荐主应用只作为一个架子，和众多子应用进行数据/事件通信。

第二个坑

问题：本地正常，发布到线上报跨域问题

原因：因为父子应用的域名不一样，某些业务场景下，cros同源策略可能会引发跨域问题

解决：在项目仓库中的default.conf文件中配置nginx，也可以让后端人员配置

server {
    listen       80;
    server_name  localhost;
    root   /usr/share/nginx/html;

    location / {
      add_header Access-Control-Allow-Origin *;
      add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
      add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
      index  index.html index.htm;
      try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}

第三个坑

问题：线上子应用不显示字体图标

解决：webpack中配置url-loader，把图标转为base64格式

常规webpack配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|webp|woff2?|eot|ttf|otf)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {limit: 999999999,}, // 此处随便
          },
        ],
      },
    ],
  },
};

react项目 craco.config.js配置

const urlLoader = {
        test: /\.(webp|woff2?|eot|ttf|otf)$/i,
        include: paths.appSrc,
        loader: require.resolve('url-loader'),
        options: {
          limit: 999999999,
        },
      };
      addAfterLoader(webpackConfig, loaderByName('url-loader'), urlLoader);

craco添加loader的写法和webpack不一样，可以去craco官网瞅瞅

第四个坑

问题：关于qiankun子应用使用monaco-editor编辑器，自定义提示不显示

原因：经过一天一夜的排查，最后发现是css影响的…（那时心态差点崩了）

解决：

• 方案一：qiankun自带的隔离-严格沙箱和实验性沙箱（不推荐，使用后会有其他问题）
• 方案二：全局给class加前缀，采用postcss-selector-namespace插件，见postcsss代码
• 方案三：vue的scope ， react的 css in js也是属于css隔离的做法
• 方案四：BEM写法，主子应用尽量避免重名的class，项目刚开始就定义好（推荐）

//postcsss代码
//新建postcss.config.js 此js可自动被webpack解析
module.exports ={
    plugins:{
        'postcss-selector-namespace':{
            namespace(){
                return '.single-vue-child'
            }
        }
    }
}

BEM

第五个坑

问题：应用加载时，报错：window.Vue.use is not a fuinction

解决：主子应用window对象冲突了，主应用里的 window.Vue = this 字眼隐藏

第六个坑

场景：

• react 采用 css in js技术作为子应用
• 主应用采用registerMicroApps全局注册子应用
  

问题：主应用非第一次切换到react子应用时，子应用的样式丢失，页面排版错乱

原因：又是一天一夜的在网上流浪~~~ ,发现是cssom导致

解决：主应用采用loadMicroApp加载子应用，页面刷新时卸载

第七个坑

问题：主子应用中存在重复请求，重复公共变量

解决：

重复请求方案：

• 方案一：使用sessionstorage汇总当前页面请求，主子应用请求时根据其判断是否已请求过
• 方案二：和后端沟通，每个请求添加uuid做唯一标识，相同时间内只能请求一次
  

重复公共变量方案

• 根据场景看其是否可以改造为私有属性，规范命名，如果是公共变量就通过缓存或者initGlobalState定义全局状态

这一个, 也不能说是坑，可以说是一种优化方法吧。

完结

其实几期需求迭代下来，qiankun在项目中的实践感觉没有大家想象中的坑点满满。
只要大家前期规划沟通好，能杜绝很多坑的出现。

比如：

• 主应用只作为一个架子，存放一些公共状态/变量，和众多子应用进行数据/事件通信
• 主子应用中的一些css的命名参考上文的BEM进行有效沟通并把它落地

最后，这篇文章是我在项目中的一些实践总结，在这里分享给小伙伴们，希望可以让小伙伴少花点时间在填坑的过程中。

希望小伙伴们给我个免费的点赞，祝大家心想事成，平安喜乐。