PasseRR's Blog

Appearance

jsdelivr cdn的使用 ​

javascript其他12021-11-23

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

jsDelivr 简介 ​

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

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

CDN使用方式 ​

使用明确版本 ​

js
// 引用最新版本
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
js
// 引用最新版本
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
js
// 引用最新版本
https://cdn.jsdelivr.net/wp/plugins/project/tags/version/file
// 引用wordpress上3.2.1的jquery
https://cdn.jsdelivr.net/wp/plugins/wp-slimstat/tags/4.6.5/wp-slimstat.js

使用版本范围 ​

js
https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js
https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
js
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

使用最新版本 ​

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

js
https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js
https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js
js
https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js
https://cdn.jsdelivr.net/gh/jquery/jquery@latest/dist/jquery.min.js
js
https://cdn.jsdelivr.net/wp/plugins/wp-slimstat/trunk/wp-slimstat.js

获取目录列表 ​

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

js
https://cdn.jsdelivr.net/npm/jquery/
js
https://cdn.jsdelivr.net/gh/jquery/jquery/

自动压缩 ​

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

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

关于缓存 ​

提示

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

递增版本号来避免缓存 ​

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

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

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

js
https://purge.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js

发邮件 ​

给官方-dak@prospectone.io发送邮件请求删除缓存。