动态加载cdn

cdn介绍

CDN（内容分发网络）是一种通过将内容分发到全球各个节点来提高网站性能和可用性的技术。CDN的主要用途包括：

1. 加速网站加载速度：CDN将网站的静态资源（如图片、CSS、JavaScript文件等）缓存到离用户最近的节点上，当用户请求这些资源时，可以从离用户最近的节点获取，减少了网络延迟，提高了网站的加载速度。
2. 减轻源服务器负载：CDN可以将用户请求分发到不同的节点上，减轻了源服务器的负载压力，提高了网站的可扩展性和稳定性。
3. 提高全球访问性：CDN的节点分布在全球各个地区，可以提供更快的响应时间和更好的用户体验，无论用户身在何处。

注：当上线打包的时候内存过大时也可以用cdn解决

使用

 加载cdn最简单的方式是直接html文件中引入：只需要在script标签中添加cdn链接即可

<script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>

应用场景

以echarts为例：

对于vue框架来说直接将标签加到index.js里面的话会增加首屏的渲染速度，无论改单页面是否需要使用echarts都会去使用cds去获取资源。所以我们可以在单页面里面动态加载script标签，当页面销毁的时候移除script标签。但是这种针对于页面中使用场景很少的。如果项目中很多页面都使用了echarts就不需要进行这种处理。

初版写法

基于这种想法写了下面的代码：

initEcharts() {
  const script = document.createElement('script')
  script.async = true//defer是“渲染完再执行”，async是“下载完就执行”
  script.src =
    'https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js'
  //设置了async属性为true，这意味着浏览器将在加载页面的同时加载这个script，而不会阻塞页面的渲染。如果你需要等待这个script加载完成后再执行某些操作，你可以监听它的load事件
  script.onload = () => {
      // 这里写你的代码，它将在script加载完成后执行
    }
  document.body.appendChild(script)
}

注意在页面销毁的时候将创建的标签移除

document.body.removeChild(script)

这里onload是一个事件，当浏览器已经加载并执行了<script>标签的内容时，这个事件就会被触发。onload事件只会在脚本成功加载并执行后被触发。如果在加载或执行脚本时发生了错误，onload事件不会被触发。可以通过监听onerror事件来处理这种情况。但是对于有些场景，只是触发了某个条件才需要加载，直接把代码写在script.onload函数里面不好处理。所以换了一种写法。

基于promise写法

 initEcharts() {
      return new Promise((resolve, reject) => {
        const script = document.createElement('script')
        script.src =
          'https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js'
        document.body.appendChild(script)
        script.onload = () => {
          resolve('')//重点，一定要写
        }
      })
    }

在 Promise 的写法中，onload事件被触发后，我们使用resolve来表示脚本已经成功加载并可以使用。这是因为 Promise 是一种用于处理异步操作的机制，它可以在异步操作完成后返回一个结果。在这个例子中，当脚本成功加载后，我们希望继续执行后续的代码，这些代码可能依赖于 echarts 已经加载并可用。通过调用resolve，我们将 Promise 标记为已完成，并将控制权交给.then方法中的回调函数，从而继续执行后续的代码。

在promise 的写法中， onload 之后要 resolve

如果不调用resolve，Promise 将一直处于挂起状态，后续的代码将无法执行。这意味着 echarts 的相关代码也无法执行，因此无法渲染 echarts。因此，在 Promise 的写法中，我们使用resolve来表示异步操作已经成功完成，可以继续执行后续的代码。

在 Promise 的生命周期中，.then函数的回调函数只会在 Promise 状态变为已完成（fulfilled）时执行。当 Promise 处于挂起状态（pending）时，.then函数的回调函数不会被执行。当你调用new Promise()创建一个 Promise 实例时，它的初始状态是挂起状态。只有当你调用resolve()或reject()来改变 Promise 的状态时，.then函数的回调函数才会被执行。

//在对应的函数里面调用
async function test(){
 await this.initEcharts()//可以用try catch去捕获成功或失败的状态进行不同的操作
}

//或者用.then方法
function test(){
 this.initEcharts().then(()=>{}).catch(()=>{})
}