qiankun 主项目与子项目共享依赖

一、主项目和子项目的公共依赖有：vue2、vuex、vue-router、element-ui、lodash、moment、axios，将这些公共依赖进行共享，减小子项目打包体积。

二、主项目配置如下：

loadMicroApp({
    name:'child-vue2',
    entry:`${process.env.VUE_APP_CHILD_VUE2_HOST}/child-vue2/`,
    container:'#container-sub-app',
    activeRule:'/bes_front',
    shared:[{
        name:'element-ui',
        singleton:true,
        requiredVersion:'2.13.2'
    },{
        name:'moment',
        singleton:true,
        requiredVersion:'^2.29.4'
    },{
        name:'axios',
        singleton:true,
        requiredVersion:'0.18.1'
    },{
        name:'lodash',
        singleton:true,
        requiredVersion:'4.17.21'
    }]

})

 main.js 修改，将共享依赖挂载到全局对象 window 上：

import ElementUI from 'element-ui';
import _ from 'lodash';
import moment from 'moment';
impoer axios from 'axios';

window.ElementUI = ElementUI;
window._ = _;
window.moment = moment;
window.axios = axios;

三、子项目配置如下：

module.exports = {
    configureWebpack:{
        externals:{
            "element-ui":"ElementUI",
            "moment":"moment",
            "axios":"axios",
            "lodash":"lodash"
        }
    }
}

四、遇到的问题：

• moment 未挂载到 window 对象上时，切换到子项目时，子项目获取到的 moment 实例为 undefined
• 将 vue-router 添加到共享依赖时，路由错乱。原因，主项目路由模式使用的 history 模式，子项目路由模式使用的 hash 模式。

五、提取完共享依赖的结果：子项目的包体积缩小了 15%。