likes
comments
collection
share

白嫖jsdelivr挂了如何处理？

作者站长头像
站长
· 阅读数 37

今天上午11:30左右接到北京技术大哥提醒，jsdelivr资源全挂了，赶紧跑生产地址看了看，还好当初准备白嫖jsdelivr时就做过应急处理策略，所以这次对咱们影响为0，除了页面控制台有点报错，其余一切正常。

下面两种备用，任选其一:

  1. cdn可以相互备份使用(bootcdn与jsdelivr一起)
  2. 可以自己保留一份静态资源传到自己的服务器上(还是自己的服务器稳，慢就慢点吧)

其实很简单,就是利用onerror事件，下面简单描述。

1. 普通的多页面项目(非工程化)

一般就是常规引入script链接地址，

  <body>
    <script>
      function errorCDN(e) {
        const target = e.getAttribute("data-name");
        console.warn(target + "白嫖cdn失败，走自己的静态资源");
        const scriptDOM = document.createElement("script");
        scriptDOM.src = "./" + target; // 注意data-name需要和本地备份的脚本文件名一致,静态资源，我用了相对路径，自行拼接
        document.head.appendChild(scriptDOM);
        e.remove();
      }
    </script>
    <script onerror="errorCDN(this)" data-name="eruda.min.js" type="text/javascript" src="https://cdn.jsdelivr.net/npm/eruda@2.4.1/eruda.min.js"></script>
  </body>

2. webpack/vue-cli项目

这一类大多都是用htmlWebpackPlugin这个插件，只需要预定义cdn地址与名称，然后模板渲染时写好与静态资源的对应就行。当然你要愿意，使用非工程化手写onerror对应也行。

//vue.config.js url是cdn地址，name是资源名，资源在对应public静态模板已经放好了备用的
[    {       name: "pdf.min.js",       url: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/build/pdf.min.js",    },]

//public/index.html
  <script>
      function errorCDN(e) {
        const target = e.getAttribute("data-name");
        console.warn(target + "白嫖cdn失败，走自己的静态资源");
        const scriptDOM = document.createElement("script");
        scriptDOM.src = "./" + target; // 注意data-name需要和本地备份的脚本文件名一致
        document.head.appendChild(scriptDOM);
        e.remove();
      }
    </script>
    <!-- 挂掉的cdn统一走这 -->
    <!-- CDN的 js -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <script
      onerror="errorCDN(this)"
      data-name="<%= htmlWebpackPlugin.options.cdn.js[i].name %>"
      src="<%= htmlWebpackPlugin.options.cdn.js[i].url %>"
    ></script>
    <% } %>

3. vite项目

现在用vite的应该还不多，大致与webpack同样原理。使用的模板插件为vite-plugin-html.

...省略，自行写吧

生产实测图

白嫖jsdelivr挂了如何处理？

希望今天出事的兄弟不要在官方issues里面抱怨了。毕竟免费的我觉得已经非常良心了，附上bootcdn留言(因为bootcdn当时用的jsdelivr链接也挂了，真是好兄弟-。-。)

白嫖jsdelivr挂了如何处理？

jsdelivr对应issues

公司有钱还是自己买cdn吧

转载自:https://juejin.cn/post/7043714179542286349
评论
请登录