vue 动态引入和移除第三方js 和 css文件

vue 动态引入和移除第三方js 和 css文件

页面中经常会引入第三方库的情况，有些组件有vue版本，直接安装依赖引入就可以，但是有一些组件不支持vue，就需要单独在页面中引入js和css，如果直接全局在index.html中引入会造成资源浪费，下面是使用Vue3语言讲解如何局部引入和移除的代码示例：

//utils/utils.js

/**
 * 动态加载第三方js.css
 * @param {*} src 路径
 * @param {*} isCss 是否为css文件
 */
function asynLoad(src, isCss = false) {
  return new Promise(res => {
    let el;
    //设置js-map, css-map防止重复追加标签
    let cssMap = new Map();
    let jsMap = new Map();
    if (isCss) {
      let list = document.documentElement.getElementsByTagName('link');
      for (let i = list.length - 1; i >= 0; i--) {
        let item = list[i];
        if (cssMap.get(item.stylesheet) == null) {
          //利用map设置link css
          cssMap.set(item.getAttribute('stylesheet'), i);
        }
      }

      //不存在追加，存在直接返回true
      if (cssMap.get(src) == null) {
        el = document.createElement('link');
        el.rel = 'stylesheet';
        el.href = src;
        appendDiv();
      } else {
        res(true);
      }

    } else {
      let list = document.documentElement.getElementsByTagName('script');
      for (let i = list.length - 1; i >= 0; i--) {
        let item = list[i];
        if (jsMap.get(item.src) == null) {
          //利用map设置src js
          jsMap.set(item.getAttribute('src'), i);
        }
      }
      //不存在追加，存在直接返回true
      if (jsMap.get(src) == null) {
        el = document.createElement('script');
        el.src = src;
        appendDiv();
      } else {
        res(true);
      }
    }

    function appendDiv() {
      document.documentElement.appendChild(el);
      //判断加载状态
      el.onload = el.onreadystatechange = function () {
        if (
          !this.readyState ||
          this.readyState == 'loaded' ||
          this.readyState == 'complete'
        ) {
          res(true);
        }
        this.onload = this.onreadystatechange = null;
      };
    }
  });
}

/**
 * 动态移除第三方js.css
 * @param {*} src 路径
 * @param {*} isCss 是否为css文件
 */
function asynRemove(src, isCss = false) {
  let el;
  if (isCss) {
    let list = document.documentElement.getElementsByTagName('link');
    for (let i = list.length - 1; i >= 0; i--) {
      let styleValue = list[i].getAttribute('stylesheet');
      if (styleValue && styleValue.indexOf(src) !== -1) {
        el = list[i];
      }
    }
  } else {
    let list = document.documentElement.getElementsByTagName('script');
    for (let i = list.length - 1; i >= 0; i--) {
      let srcValue = list[i].getAttribute('src');
      if (srcValue && srcValue.indexOf(src) !== -1) {
        el = list[i];
      }
    }
  }
  el && document.documentElement.removeChild(el);
}
//导出
export { asynLoad,  asynRemove }

在页面中使用：

  import {onMounted， onUnmounted} from 'vue'
  import {asynRemove, asynLoad} from '@/utils/utils'
  //在挂载后加载
 onMounted(() => {
    Promise.all([
      asynLoad('./libs/xxxCss.css', true),
      asynLoad('./libs/xxx11.js'),
      asynLoad('./libs/xxx22.js'),
    ]).then(() => {
      setTimeout(() => {
        console.log("加载完毕后执行的操作");
      }, 200)
    }).catch(res => {
		ElMessage.error("加载异常")
    })
  })
  //在离开页面移除
  onUnmounted(() => {
  	asynRemove('./libs/xxxCss.css', true);
    asynRemove('./libs/xxx11.js');
    asynRemove('./libs/xxx22.js');
  })