项目中script加载错误的处理

在项目中遇到的一个难点，无论是我们用的原生js还是用的框架最后上线的时候都会是打包好之后，打包好之后的js文件中都会自己或者自动引入script，在生产环境中会出现其中有一个script无法加载成功的时候怎么处理，当js加载不出来的时候页面是显示不出来的，最起码功能是不正常的，现在都是单页面应用，js加载不成功的话对页面影响还是比较大的，所以我们需要去处理这个问题。。。

1.就是域名的错误，公司有很多域名一个一个换。很简单，就两步，1.什么时候重试？2.如何重试？

<script src="http://abcd.com/js/plugin.js"></script>

2.什么时候重试？当然是js加载失败的时候重试了。。怎么重试。。看看下面

  <script>
    //公司有的域名
    const domains = [
      'aksknkd.com',
      'siahkds.com',
      'jahjs.com'
    ]
    //简历隐射关系(一次一次替换尝试)
    const retry = {}
    window.addEventListener('err', (e) =>
    {
      //因为会有很多种错误，除了加载错误其他的都不处理
      if (e instanceof ErrorEvent || e.target.tagName != 'SCRIPT') {
        return
      }
      const url = new URL(e.target.src);
      //加载失败的域名
      const pathName = url.pathName;
      //看有没有记录
      if (!(pathName in retry)) {
        retry[pathName] = 0;
      }
      const index = retry[pathName];
      //不能越界
      if (index > domains.length) {
        return
      }
      const newDomain = domains[index];
      url.host = newDomain;
      document.write(`\<script src="${url.toString()}"><\/script>`)
      /****这样会导致加载顺序变化需要换一种阻塞页面解析的方式
      // const script = document.createElement('script');
      // script.src = url.toString();
      // //加到错误之前
      // e.target.parentElement.insertBefor(script, e.target);
      retry[pathName]++;
      e.target.remove();
    }, true)
  </script>

完事。。。。。。。。。。