专注于前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

cdn

  • npm包 CDN 收集

    / 分类: 工具 / No Comments

    jsDelivr(支持 combine)
    `https://cdn.jsdelivr.net/npm/:package@:version/:file`
    # https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js
    unpkg
    `https://unpkg.com/:package@:version/:file`
    # https://unpkg.com/jquery@3.6.0/dist/jquery.min.js
    饿了么
    `https://npm.elemecdn.com/:package@:version/:file`
    # https://npm.elemecdn.com/jquery@3.6.0/dist/jquery.min.js
    知乎
    `https://unpkg.zhimg.com/:package@:version/:file`
    # https://unpkg.zhimg.com/jquery@3.6.0/dist/jquery.min.js
    百度
    `https://code.bdstatic.com/npm/:package@:version/:file`
    # https://code.bdstatic.com/npm/jquery@3.6.0/dist/jquery.min.js

    jsDelivr国内可能部分网络有问题, 但仅jsDelivr才支持combine(多个文件合并).
    使用CDN引入, 可以独立公共资源, 省去webpack打包. 当然, 也有人用来做图床.

  • 免费静态资源CDN整理

    / 分类: 开发 / No Comments

    资源多, 比较靠谱的CDN:

    • www.bootcdn.cn:
      更新快, 用的又拍云

    例子: //cdn.bootcss.com/react/15.1.0/react.min.js

    例子: //cdn.jsdelivr.net/g/react@15.1.0(react.min.js+react-dom.min.js)
    或: //cdn.jsdelivr.net/combine/url1,url2,url3

    • cdnjs.com:
      国内访问较慢, 例子: //cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js
    • unpkg.com:
      也使用的cloudflare的cnd, 更新快, react官方文档cdn部分也写的这个.

    资源少或更新慢大厂cdn:

    如何选择靠谱的

    • 国内项目: 貌似只能选bootcdn了(未使用较新js库的项目也可以选择大厂cdn). 非常可悲, 同步更新cdnjs的国内CDN, 没一个大厂能提供
      国外项目: jsdelivr/unpkg.com/cdnjs.com

    测试靠谱程度, 可以用下面几个地址测试下:
    http://ce.cloud.360.cn/
    http://www.17ce.com/
    http://tool.chinaz.com/speedtest.aspx

    • 使用多个CDN(防止某个CND挂掉):
    // 拿jQuery举例(cdn1挂掉, 使用cdn2)
    <script src="//cdn1.com/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src=//cdn2.com/jquery.min.js><\/script>')</script>