上一篇文章已经讲过基础使用了,用过的同学一定会有这样的疑惑,所有的插件都打包在主项目里,那第一次打开页面估计得慢死了吧!
所以这篇我们来讲怎么把插件从主项目拆出来,做到使用才加载。
方式一:
按照kfc的设计,我们可以把主项目中直接在main.js中import的插件(非vue.use,可以直接绑定在vue原型或者window上的)放在主项目中的js/config.js中
const getDownPath = (name) => { 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-子项目优化
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!