The last article has talked about the basic use, used students must have such doubts, all plug-ins are packaged in the main project, that the first time to open the page is estimated to be dead slow!

So in this article we will talk about how to take plug-ins out of the main project and load them until they are used.

A:

According to the design of KFC, we can put the plug-ins (not vue.use, which can be directly bound to vue prototype or window) imported directly from the main project into js/config.js in the main project

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: {// Whether loaded: false, // require config module: ["echarts", "jsPlumb", "vs/editor/editor.main"], //vue introduces the configuration name "" to bind directly to the window object vue: ["$echarts", "", "monaco"] }, projectA: { loaded: false, module: ["echarts"], vue: ["$echarts"] }, projectB: { loaded: false, module: ["echarts", "jsPlumb", "vs/editor/editor.main"], vue: ["$echarts", "", "monaco"] } };Copy the code

DefaultPath is the static resource address, which can be relative or absolute moduleConfigs for each subproject corresponding to the third party library that needs to be loaded.

ProjectA, projectB is the name of the line of business and must be the same as projectKey in the subproject SRC /js/util.js, otherwise the subproject will not be able to find the corresponding load resource.

Method 2:

Separate the plug-in from the main project as a project, as shown in the following diagram

The script that generates the configuration can be shell, Node, Python, etc. We use shell to generate the configuration. The merge code looks like this (using the Jq command) :

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

The main project loading plug-in section also needs to be modified:

1. Modify js/config.js to remove the loading plug-in configuration. Use require to load tripartite plugins, so baseUrl sets the location of its own plugins (we put all tripartite plugins in the plugins project for easy management).

window.require.config({ baseUrl: '/main/plugin/', waitSeconds: 0 }); // Format plugin 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; }Copy the code

2. Modify the js/ RouterUtil.js code

//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); . . }Copy the code

3. We released Jenkins with the diagram of the top and bottom plugins

The first method and the second method can realize plug-in loading on demand, but the second method is easier to manage, so that the main project and business are completely decoupled. Configuration is also very simple, I hope to help you. Loading screenshots up and down:

This is the plug-in separation part, uploaded later ** VUe-based front-end microservices Architecture solution 3- sub-project optimization **