js中动态获取页面的script地址，并动态给他添加script标签和地址，解决页面白屏问题

前言：（业务逻辑）

       在vue中，遇到这样的情况，初始化加载太多js，导致页面白屏，为了解决这个情况，决定使用具体组件具体加载相应的cdn地址。

        为啥不用vue的按需加载呢，是因为我们项目对性能要求很高，但是按需加载后，引入的插件包，打包以后的大小比cdn要大太多了，整体来说是使用他是得不偿失，但是一次性加载太多cdn又会导致白屏，所以在这里我使用的方法：具体某个页面使用第三方插件，就在使用的页面js动态加载scirpt，并给他上标签

具体操作：

1、面临第一个问题，要先获取到当前页面所用到的所有引入 的  <script>,下面的newArr 就是拿到的所有的script地址

 let scriptsArr = document.getElementsByTagName('script')
      let newArr = []
      //获取所有的script地址
      for (var i = 0; i < scriptsArr.length; i++) {
        newArr.push(scriptsArr[i].getAttribute('src', 4))
      }

2、给界面加载我们想放进去的cdn地址，因为vue是单页面组件，所有我们直接放在 #app上

       // 创建script标签，引入外部文件
        let script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = url
        document.getElementById('app').appendChild(script)

分享源码：

  mounted中调用：（必须是mounted，不能是created,必须等页面加载完成才能挂载）

 let url = '//cktcdn.kaoti100.com/cdn.jsdelivr.net/npm/vue-aplayer/vue-aplayer.js'
    this.app_script(url)//初始化给他添加cdn地址

methods里面定义方法

    /**
     * 获取页面上的所有script地址。来判断是否要加cdn地址
     * */
    app_script(url) {
      let scriptsArr = document.getElementsByTagName('script')
      let newArr = []
      //获取所有的script地址
      for (var i = 0; i < scriptsArr.length; i++) {
        newArr.push(scriptsArr[i].getAttribute('src', 4))
      }
      let isFirst = true //判断是否加载过这个script，有就不加载了
      let cdnUrl = url
      newArr.forEach(item => {
        if (item === cdnUrl) {
          isFirst = false
        }
      })
      if (isFirst) {
        // 创建script标签，引入外部文件
        let script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = url
        document.getElementById('app').appendChild(script)
      }

    },

到此为止！