关于 cdn 在项目中的使用

当我们在项目中引入公共 cdn 时,想要考虑一些东西,现在我把他描写一下

公共 cdn 的选择

这里只讨论免费的 cdn

1. BootCDN
   https://www.bootcdn.cn/

   • 库同步于 cdnjs
   • 支持海外节点,但是较慢
   • http/2
   • 国内大部分地区都可访问(部分地区可能缓慢)

2. 又拍云
   http://jscdn.upai.com/

   • 需要登录注册,申请
   • http/3
   • 支持海外节点
   • 国内与国外速度都是较快

3. CDNJS
   https://cdnjs.com/

   • 国内部分区域无法访问
   • 国外速度较快
   • http/2

4. jsDelivr
   https://www.jsdelivr.com/

   • 国内大部分地区较快
   • 国外速度稳定,较好
   • http/2
   • 支持 UNPKG 的功能, 从 NPM 获得文件

5. UNPKG
   https://unpkg.com/

   • 国内速度较慢, 国外速度较快
   • 从 NPM 获得文件
   • HTTP2

6. 七牛
   http://staticfile.org/

   • 国内大部分地区速度稳定,快速
   • 国外速度也很快
   • 库同步于 cdnjs
   • 暂不支持 HTTP2

7. 75cdn
   https://cdn.baomitu.com/

   • 有国外节点可用,但是稍慢
   • 国内速度较稳定
   • 支持 HTTP2
   • 有 Google 字体库

较好用的,比较稳定的基本上就上述这些, 如果有问题可用此网站实时测试:
https://www.17ce.com/

cdn 选择总结

如果项目一直运行在国内, 可以选择 BootCDN, 又拍云,jsDelivr,七牛,75cdn
如果是海外项目, 可以选择: UNPKG,jsDelivr, CDNJS, 七牛
如果想要兼容海内外,可以选择: jsDelivr, 七牛

cdn 容错处理

cdn 虽然好,但是当我们引入 cdn 时,就将我们的生命周期绑定在一起,
一旦出现了什么问题,我们的那一段代码就无法使用了
所以我们对于公共的 cdn 就要加上容错处理:

方案 1

在 cdn 的 script 后加入一句容错处理
这样的写法,如果不借用插件会显示比较麻烦, 如果 cdn 只有1,2 个的话还好, 如果有异步 cdn 引入就显得更麻烦了
document.write('

在 jsdelivr 中我使用了 不存在的版本, 所以这一定不会被加载, 但我们检测到之后, 会使用 https://cdn.bootcdn.net/ajax/libs/video.js/7.10.1/ 来替换, 使得加载可以成功

总结

在 web或者 h5 项目中, 使用 cdn 确实能加快首屏渲染并且减少网站流量
并且通过这些方案可以有效减少出问题的概率, 十分值得推广
例子地址: https://github.com/Grewer/JsD...