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

·  阅读 755

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

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

方式一:

按照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-子项目优化**

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改