第三方插件分包 --- 篇幅3（使用promise加锁阻塞解决多次加载问题）

第三方插件分包 — 篇幅3

问题描述

接篇幅2-插件分包当使用script动态加载js文件时，如果存在多次调用（例多次调用获取的方法，会导致加载多次script标签去引用js）如下：

class Test{
   
	async add () {
   
		// 因为插件是懒加载异步的 所以需要使用async await达到同步代码编辑
	   let html2canvas = await ThirdPartyUtils.getThirdParty("html2canvas");
	   // html2canvas.render......
	}
}

let test = new Test();
// 在循环中会多次加载html2canvas.min.js文件，因为for循环是同步的但是add方法是异步的
for (let i = 0; i < 10; i++) {
   
       test.add(); 
}

循环调用时会多次加载js文件，如下：

如果js文件中有循环嵌套引用时，如果多次加载相同的js文件会报错，笔者就遇到

解决方案（使用promise加锁阻塞）

const ThirdPartyType = {
   
    axios: {
   
       file:"axios.min.js",
       load:false,
       queue:[]
    },//0.21.4
    echarts: {
   
        file: "echarts.min.js",
        load: false,//默认为未加载
        queue: []
    },//4.9.0
    html2canvas