前言qiankun微服务将多个不同技术栈（React、Vue、Angular、jQuery）的系统集成到一个系统中，每个系统都可以独立部署运行。适用于大型团队和大型前端项目。实现功能：引??入多技术栈（React+Vue）后台管理系统（AntDesignPro）qiankun环境下多tab页面缓存依赖共享---主、子应用公用包react、react-dom、moment、antd等）常用共享资源---共享工具util、组件，配置在多个项目基于qiankun微服务同步在线预览：点击预览效果获取项目源码项目架构项目技术栈端口访问地址主项目(main-react)AntDesignPro5000http://qiankun.fancystore.cn子项目1(app1-react)AntDesignPro5001http://app1.fancystore.cn子项目2(app2-react)AntDesignPro5002http://app2.fancystore.cn-项目3(app3-vue)VueElementTemplate5003http://app3.fancystore.cn公共资源库(qiankun-common)TypeScripthttps://github.com/czero1995/...项目改造1.主要应用(base)1.1安装qiankunnpminstall@umi/qiankun--saveoryarnadd@umi/qiankun--save1.2注册子应用//在config/config.ts中添加qiankun:{master:{apps:[{name:'app1',entry:process.env.NODE_ENV==='生产'？'//app1.fancystore.cn':'//localhost:5001',},{name:'app2',entry:process.env.NODE_ENV==='production'?'//app2.fancystore.cn:':'//localhost:5002',},{name:'app3',entry:process.env.NODE_ENV==='production'?'//app3.fancystore.cn:':'//localhost:5003',},]],sandbox:true,//是否开启沙盒prefetch:true,//是否开启预取功能}}1.3修改根节点//src/pages/document.ejsid=root-master1.4创建一个新的子应用加载布局MicroAppLayout//src/layouts/MicroAppLayoutimportBasicLayoutfrom'@ant-design/pro-layout';从'react-keep-alive'导入{KeepAlive，Provider};import{MicroAppWithMemoHistory}from'umi';从“../../config/routes”导入所有路由；functionMicroAppLayout(props){lettargetMicro=''consttransRoutes=(routes,pathname)=>{routes.map(item=>{if(item.routes){returntransRoutes(item.routes,pathname)}if(item.path===路径名){targetMicro=item.microName}})returntargetMicro}return{targetMicro？:}}exportdefaultMicroAppLayout;1.5在src目录下新建app.ts，判断如果是子应用，需要用MicroAppLayout加载//src/app.tsimportLoadingComponentfrom'@/components/PageLoading';import{dynamic}from'umi';consttransRoutes=(routes)=>{routes.forEach(item=>{if(item.routes){returntransRoutes(item.routes)}if(item.microName){item.component=dynamic({loader:(a)=>import(/*webpackChunkName:'layouts__MicroAppLayout'*/'@/layouts/MicroAppLayout'),loading:LoadingComponent,})}})}exportfunctionpatchRoutes({routes}){transRoutes(routes[0].routes)}###2.子应用React(AntDesinPro)####2.1安装qiankunnpminstall@umi/qiankun--saveoryarnadd@umi/qiankun--save####2.2将qiankun注册为子项目，在config/config.ts中添加qiankun:{slave:{}}####2.3修改根节点src/pages/document.ejsid=root-slave####2.4在src目录下新建app.ts，导出对应的生命周期钩子。子项目需要区分是qiankun环境还是当前环境。如果是qiankun环境，使用blank模板（src/layouts/BlankLayout），如果是当前环境，使用默认模板（src/layouts/BasicLayout），这样就可以嵌入到qiankun环境中，并且可以也可以独立开发和部署。constisQiankun=window.__POWERED_BY_QIANKUN__exportconstqiankun={//应用加载前的异步引导(props){console.log('app1bootstrap',props);},//在应用渲染前触发异步挂载(props){console.log('app1mount',props);},//触发异步卸载(props){console.log('app1unmount',props);},};电子xportasyncfunctionpatchRoutes({routes}){if(isQiankun){routes[0]['component']=require('@/layouts/BlankLayout').default}}3.子应用Vue(Vue-Element-Template)3.1在vue.config.js下的configureWebpack添加输出：{//将子应用打包成umd库格式（必填）library:`${name}-[name]`,libraryTarget:'umd',jsonpFunction:`webpackJsonp_${name}`,}3.2在vue.config.js下添加到devServer:headers:{"Access-Control-Allow-Origin":"*","Access-Control-Allow-Methods":"*","Access-Control-Allow-Headers":"*"}3.3在main.js中暴露qiankun的生命周期：letinstall=null;functionrender(props){install=newVue({router,store,render:h=>h(App)}).$mount('#app3')}if(window.__POWERED_BY_QIANKUN__){__webpack_public_path__=window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;}else{渲染（）；}导出异步函数bootstrap(props){}exportasyncfunctionmount(props){render(props);}exportasyncfunctionunmount(props){install.$destroy();}install=null}项目概要主应用加载子应用两种形式使用路由绑定的方式和使用组件的方式，如果要支持AntDesignPro多标签页，需要使用形式，因为动态显示插入Tab，绑定死路由会导致qiankun加载失败进入对应页面AntDesignPro多标签页，点击标签页显示不同的应用页面会被销毁，内容数据会被初始化丢失，src/layouts/MicroAppLayout下：importreact-keep-alivepackagemainapplicationmustUsingMicroAppWithMemoHistory,usingMicroApp没有效果。qiankun环境下，页面跳转404。在qiankun环境下，所有的路由变化都会触发qiankun的路由监听。需要对环境进行判断：exportconstqiankunJump=(url:string,name='pagename',params=null)=>{window.__POWERED_BY_QIANKUN__?history.pushState(params,name,url):umiHistory.push(url)}qiankunJump('/xxx')qiankunexternal会报Cannotreadproperty'createContext'ofundefind子项是umi项目，只要externals已配置，将发生错误。您需要更改externals的编写并删除windowexternals:{'react':'window.React','react-dom':'window.ReactDOM',}=>externals:{react:'React','react-dom':'ReactDOM',}项目优化1.依赖共享如果主应用和子应用使用同一个库或包（react、react-dom、moment等），可以使用externals来引入，减少加载重复包造成的资源浪费。qiankun请求子项目外部script标签的内容后，会记录在一个全局变量中。下次再用的时候，他先从这个全局变量中取。这样就实现了内容复用，只要两个链接的Urls一致就可以了constfetchScript=scriptUrl=>scriptCache[scriptUrl]||(scriptCache[scriptUrl]=fetch(scriptUrl).then(response=>response.text()));所以只要子项目配置了webpackexternals，并且这些公共依赖在同一台服务器上，就可以实现按需引入子项目的公共依赖。一个项目使用后，不会重复加载另一个项目，可以直接复用这个文件。2.资源共享解决资源共享问题，可以提高项目的可维护性。否则，维护多个系统共享的组件或工具非常费力。1、最常见的方式是发布为npm包，安装每个项目的更新包。您可以使用npmlink进行本地调试。但是反复更新包比较麻烦。2、另一种方式是使用git库导入，在package.json的依赖中添加“qiankun-common”：“git+https://git@github.com:czero1995/qiankun-common.git”useimport{commonUtil}from'qiankun-common';util.qiankunJump('/xxx')###项目启动1、进入main-reactnpminstallnpmrunstart2。输入app1-reactnpminstallnpmrunstart3。输入app2-reactnpminstallnpmrunstart4。进入app3-reactnpminstallnpmrundev###项目部署子应用Nginx需要配置跨域请求头：add_headerAccess-Control-Allow-Origin*;add_headerAccess-Control-Allow-Credentials真；add_header缓存控制无缓存；Nginx启用gzip压缩：gzipon；gzip_min_length200;gzip_buffers416k;gzip_comp_level9；gzip_vary开启；gzip_disable"MSIE[1-6]\.";文本/css应用程序/xml文本/javascript应用程序/x-httpd-php应用程序/javascript应用程序/json；
