js怎么引入线上的文件？

Question

比如要引入xlsx文件，import只能引入本地的文件，import xlsx from "https://unpkg.com/xlsx@0.18.5"不行。那在线的js文件怎么引入？并且拿到引入返回结果？就像调接口那样

本来在index.html里使用cdn引入全部依赖，但是全部加载完依赖才能渲染出页面，经常50多秒，可能是依赖太多了，我想有没有什么办法可以像引入本地文件那样引入线上的js文件？在需要的地方引一下直接用，减少首页的白屏时间

Answer 1

封装加载项：

// cdn引入
const scripts = [
  // "https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js",
  "https://webapi.amap.com/maps?v=1.4.15&key=f584dabfcc1330f3c545160674a56ea1",
]

export function initScript() {
  for (let url of scripts) {
    loadScript(url).catch((err) => {
      setTimeout(() => {
        loadScript(url)// 再次加载
      }, 1000)
    });
  }
}



const css = [
  "https://icons.getbootstrap.com", // 使用：<i class="bi bi-window"></i>
  "https://unpkg.com/bootstrap-icons@1.5.0/font/bootstrap-icons.css",
  "https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css"
]

export function initStyle() {
  for (let url of css) {
    loadStyle(url).catch((err) => {
      setTimeout(() => {
        loadStyle(url)// 再次加载
      }, 1000)
    });
  }
}










































// 封装加载依赖的方法
function loadScript(url) {
  return new Promise((resolve, reject) => {
    const scripts = document.querySelectorAll("script");
    let isHas; // 是否已经存在了
    for (let item of scripts) {
      isHas = item.src === url;
    }

    // 没存在就创建
    if (!isHas) {
      // 创建script标签，引入外部文件
      let script = document.createElement("script");
      script.type = "text/javascript";
      script.src = url;
      document.body.appendChild(script);

      script.onload = () => {
        console.log(url + " 引入成功");
        resolve();
      };
      script.onerror = () => {
        console.log(url + " 引入失败");
        reject();
      };
    }
  })
}
// 封装加载样式文件的方法
function loadStyle(url) {
  return new Promise((resolve, reject) => {
    const links = document.querySelectorAll("link");
    let isHas; // 是否已经存在了
    for (let item of links) {
      isHas = item.href === url;
    }

    // 没存在就创建
    if (!isHas) {
      // 创建script标签，引入外部文件
      let link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = url;
      document.body.appendChild(link);

      link.onload = () => {
        console.log(url + " 加载成功");
        resolve();
      };
      link.onerror = () => {
        console.log(url + " 加载失败");
        reject();
      };
    }
  })
}

在登陆成功的事件后执行：