PasseRR

xie__hai@sina.com

jsdelivr cdn的使用

23 Nov 2021 » others, js, style

前言

最近访问Github上的博客很慢,F12发现加载静态资源非常慢, 就在想有没有办法把静态资源做个CDN,最先想到的是把静态资源放在gitee上,然后在 github上通过raw文件的方式引用,结果不行,因为raw文件返回的content-type为text/plain。 后来找到了jsDelivr,将一些公共的静态资源放在github上,通过cdn引入,博客打开速度就正常了。

jsDelivr 简介

jsDelivr是一个免费、开源的加速CDN公共服务,托管了许多大大小小的项目,可加速访问托管的项目目录或图片资源。 他支持提供npmGithuWordPress上资源cdn服务。

jsDelivr 跟其他同类型服务还有什么不同之处呢?
jsDelivr 将重心放在更快速的网路连线,利用 CDN 技术来确保每个地区的使用者都能获得最好的连线速度。 依据 jsDelivr 的说明,它们也是首个「打通中国大陆与海外的免费 CDN 服务」,网页开发者无须担心GFW问题而影响连线。
此外,jsDelivr 可将不同的 JavaScript 或 CSS libraries 整合在一起,透过一段链结来载入网站,非常方便! 如果你正在寻找类似服务,jsDelivr 是个不错的选择。
摘自

CDN使用方式

  1. 使用明确版本

     // npm
     https://cdn.jsdelivr.net/npm/package@version/file
     // 引用npm上的3.2.1的jquery
     https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js
    
     // github
     https://cdn.jsdelivr.net/gh/user/repo@version/file
     // 引用github上3.2.1的jquery
     https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js
    
     // wordpress
     https://cdn.jsdelivr.net/wp/plugins/project/tags/version/file
     https://cdn.jsdelivr.net/wp/plugins/wp-slimstat/tags/4.6.5/wp-slimstat.js
    
  2. 使用版本范围
     // npm
     https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js
     https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
        
     // github
     https://cdn.jsdelivr.net/gh/jquery/jquery@3.2/dist/jquery.min.js
     https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js
    
  3. 使用最新版本

    不带版本号就是最新版 @latest可以省略

     // npm 
     https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js
     https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js
       
     // github
     https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js
     https://cdn.jsdelivr.net/gh/jquery/jquery@latest/dist/jquery.min.js
       
     // wp
     https://cdn.jsdelivr.net/wp/plugins/wp-slimstat/trunk/wp-slimstat.js
    
  4. 获取目录列表

    获取目录url必须以/结尾,否则会以为是文件url结构。

     // npm
     https://cdn.jsdelivr.net/npm/jquery/
     // github
     https://cdn.jsdelivr.net/gh/jquery/jquery/
    
  5. 自动压缩

    对任意css、js文件添加.min访问,会获取压缩后的文件,若没有jsDelivr会自动创建。

     // npm
     https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js
     // github
     https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js
     // wp
     https://cdn.jsdelivr.net/wp/plugins/wp-slimstat/tags/4.6.5/wp-slimstat.min.js
    

关于缓存

jsdelivr缓存是永久存储,仅在第一次或者jsdelivr存储故障是才会从npm/github/wp获取文件。 如果请求文件在最新版本中不可用,jsdelivr有回退功能,会继续提供旧版本而不是404。

  1. 递增版本号来避免缓存

    每次改动都发布版本,cdn使用最新版本,就不会存在缓存。

  2. 使用purge可以清除指定文件的缓存

    若不想每次发布版本,可以将url中的cdn替换为purge在浏览器访问即可手动刷新缓存。

     https://purge.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js    
    
  3. 发邮件 给官方-dak@prospectone.io发送邮件请求删除缓存。