基于vue的前端微服务架构解决方案2-插件分离

上一篇文章已经讲过基础使用了，用过的同学一定会有这样的疑惑，所有的插件都打包在主项目里，那第一次打开页面估计得慢死了吧！

所以这篇我们来讲怎么把插件从主项目拆出来，做到使用才加载。

方式一：

按照kfc的设计，我们可以把主项目中直接在main.js中import的插件（非vue.use，可以直接绑定在vue原型或者window上的）放在主项目中的js/config.js中

const getDownPath = (name) => {
    // const defaultPath = '/main/static/js/';
    const defaultPath = '//ks3-cn-beijing.ksyun.com/bigdata-fe/project/ccb/fe-frame-demo/libs/';
    return defaultPath + name;
}
window.require.config({
    paths: {
        "echarts": getDownPath("echarts"),
        "jsPlumb": getDownPath("jsplumb"),
        'vs': getDownPath('monaco')
    }
});

export const moduleConfigs = {
    demo: {
        //是否已加载
        loaded: false,
        //和require config对应名称
        module: ["echarts", "jsPlumb", "vs/editor/editor.main"],
        //vue引入的配置名  ""为直接绑定到window对象
        vue: ["$echarts", "", "monaco"]
    },
    projectA: {
        loaded: false,
        module: ["echarts"],
        vue: ["$echarts"]
    },
    projectB: {
        loaded: false,
        module: ["echarts", "jsPlumb", "vs/editor/editor.main"],
        vue: ["$echarts", "", "monaco"]
    }
};

defaultPath为静态资源地址，可以为相对，也可以为绝对 moduleConfigs为每个子项目对应的需要加载的第三方库。

projectA，projectB为业务线名称，必须和子项目src/js/util.js中的projectKey一致，否则子项目无法找到对应的加载资源。

方式二：

把插件从主项目中单独提出来成为一个工程，架构图如下

原来就是直接把插件的配置merge到子项目的配置里，还是之前说的这个生成配置的脚本可以是shell，node，Python等，我们使用的是shell。merge代码如下（使用的是jq命令）：

jq -s '.[0] * .[1]' ccb.json plug-ins.json  >ccb-cover.json

主项目加载插件部分也需要修改一下：

1，修改js/config.js，去掉加载插件配置。使用require加载三方插件，所以baseUrl自己设置自己插件放的位置（我们把三方插件全部放在了插件这个工程里，便于管理）。

window.require.config({
    baseUrl: '/main/plugin/',
    waitSeconds: 0
});

//格式化插件config
export const getModuleConfig = (cfg) => {
    let returnCfg = {};
    for(let attr in cfg){
        if(cfg[attr] && cfg[attr].plugin){
            returnCfg[attr] = cfg[attr].plugin;
        }
    }
    return returnCfg;
}

2，修改js/routerUtil.js部分代码

//import {moduleConfigs} from './config';
import { getModuleConfig } from './config';
let moduleConfigs = null;
...
...
...
const handle = async (to, from, next, config) => {
    ...
    ...
    ...
    if(!moduleConfigs){
        moduleConfigs = getModuleConfig(config);
    }
    await loadJsCss(serviceName, cfg.css, cfg.app);
    ...
    ...
}

3，我们发布用的jenkins，上下插件部分jenkins的图

方式一，方式二都能实现插件按需加载，不过方式二更便于管理，使主项目和业务完全解耦。配置也是非常简单，希望对大家有所帮助。上下加载截图：

这就是插件分离的部分，稍后后上传**基于vue的前端微服务架构解决方案3-子项目优化**