BI数据可视化 - 组件动态加载

[chiyan-lin]

No description provided.

[chiyan-lin]

前言

上一篇我们说完了组件的协议，开发完成组件，将组件打包成 UMD 格式的 js 文件包，平台内组件又是怎么加载和管理的

[chiyan-lin]

UMD 格式拆解

想要加载umd的js文件， 首先需要了解下 umd 格式是什么样子的

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory(require("vue"), require("@bi/util"));
	else if(typeof define === 'function' && define.amd)
		define(["vue", "@bi/util"], factory);
	else {
		var a = typeof exports === 'object' ? factory(require("vue"), require("@bi/util")) : factory(root["Vue3"], root["$biUtil"]);
		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
	}
})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__537__, __WEBPACK_EXTERNAL_MODULE__386__) {
return /******/ (function() { // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = {}
/************************************************************************/
/******/ 	// The module cache
/******/ 	var __webpack_module_cache__ = {};
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {}
/******/ 	

var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
!function() {
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);

// EXPORTS
__webpack_require__.d(__webpack_exports__, {
  ChartCom: function() { return /* reexport */ component; },
  "default": function() { return /* binding */ render; }
});


const __exports__ = /*#__PURE__*/(0,exportHelper/* default */.Z)(componentvue_type_script_setup_true_lang_ts_name_component, [['__scopeId',"data-v-6e6e7f62"]])

var component = (__exports__);
var component = (mata);


window['@bi/[email protected]'] = { component: component, meta: mata };

}();
/******/ 	return __webpack_exports__;
/******/ })()
;
});

工具包等工具都是通过 cdn 引入到平台的，所以顶部会有 root 引进来，其中最重要的就是 window['@bi/[email protected]'] = { component: component, meta: mata }; 可以看到打包完成后的文件会被挂载在window下特殊的一个命名空间

组件加载

加载 js ，我们再熟悉不过，直接使用 script 加载，但是从上面的分析来看，这样 的操作会污染全局的window
所以借鉴了qiankun，这里可以有另外一个方案 通过 ajax get 组件的代码，然后通过 eval 来执行，过程中我们把 window 换成平台定义的组件管理 ref @https://github.com/kuitos/import-html-entry/blob/master/src/utils.js#L171

完成之后，组件管理 ref 上就有如下的组件

{
    '@bi/[email protected]': { component, meta }
}

在整个平台，每一个生成出来的图表都有2个基本属性 name 组件的名字 version 组件版本

这两个属性可以唯一确定一个组件，在实际的操作上，组件放在统一的 cdn 上，有了统一的域名，加载图表的时候，动态拼接域名、命名空间、组件name、组件version 就可以确定这个组件的实际地址，再使用上面的方案去加载

详细流程

1. 拉取报表信息，分析图表
2. 根据图表组件的配置，拉取对应组件的js模块
3. 并行加载组件js并进行缓存，并将组件信息存到组件管理 ref 中
4. 组件渲染，使用 computed 和 组件管理 ref 组合 ，通过 map 的方式使用具体组件的 component 和 meta