jsDelivr:免费公共 CDN 加速服务/使用教程教程其它

印迹发布于:2022-1-4 478

简介

开发者或网站管理者时常会用到一些 JavaScript Libraries,例如最常见的 jQuery 或字型和 CSS 框架,通常不建议自己在服务器存储这些文件,因为除了耗流量,也可能因此拖慢网站的载入速度。为了解决这种情况,有些人会选择从 [Google Hosted Libaries ](https://developers.google.com/speed/libraries/ "Google Hosted Libaries ")或 [Microsoft Ajax Content Delivery Network](https://www.asp.net/ajax/cdn "Microsoft Ajax Content Delivery Network") 来拉文件,但因为中国特殊网络环境(GFW)的原因,Google Hosted Libraries等服务是没法直接用的。

 [jsDelivr](https://www.jsdelivr.com/ "jsDelivr") 是一个免费、开放原始码的公有 CDN 服务,托管了许多大大小小的 JavaScript、CSS 等 libraries,除了在内容部分有相当高的完整性,jsDelivr 跟其他同类型服务还有什么不同之处呢?

jsDelivr 将重心放在更快速的网路连线,利用 CDN 技术来确保每个地区的使用者都能获得最好的连线速度。依据 jsDelivr 的说明,它们也是首个「打通中国大陆与海外的免费 CDN 服务」,网页开发者无须担心GFW问题而影响连线(不会像之前中国大陆无法使用 [Google Hosted Libaries ](https://developers.google.com/speed/libraries/ "Google Hosted Libaries ") 必须用 [libs.useso.com](https://free.com.tw/libs-useso-com/ "libs.useso.com") 替代)。

此外,jsDelivr 可将不同的 JavaScript 或 CSS libraries 整合在一起,透过一段链结来载入网站,非常方便!如果你正在寻找类似服务,jsDelivr 是个不错的选择。

使用方法

jsDelivr提供npm,GitHub,WordPress等项目的镜像。

对于新手来说,可能翻译来自jsDelivr官方的使用方法感觉很复杂,其实可以简单一点告诉大家怎么用。

比如在我的网站主题中会用到这样的一个CSS文件:style.css

如果我使用本地文件,网站中载入的文件是:

https://mywebsite.com/wp-content/themes/mytheme/static/css/style.css

如果我把主题托管到github,那么在我的github中也会有这一个文件:

https://github.com/mygitname/mywebsite/tree/master/static/css/style.css

若我Releases一个版本0.0.1,那github中会有这样的文件:

https://github.com/mygitname/mywebsite/tree/0.0.1/static/css/style.css

如果我要使用jsDelivr托管此文件,那只需要将网站中载入的本地文件链接更换为jsDelivr CDN的链接,格式如下(gh代表github):

https://cdn.jsdelivr.net/gh/mygitname/[email protected]/static/css/style.css

若要使用缩小版本功能,则将“.min”添加到任何JS / CSS文件中,jsdelivr将自动生成文件。

https://cdn.jsdelivr.net/gh/mygitname/[email protected]/static/css/style.min.css
通过jsDelivr引用资源

使用方法:

https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径

例如:

https://cdn.jsdelivr.net/gh/TRHX/[email protected]/images/trhx.png
https://cdn.jsdelivr.net/gh/TRHX/[email protected]/css/style.css
https://cdn.jsdelivr.net/gh/moezx/[email protected]//The%20Pet%20Girl%20of%20Sakurasou.mp4

注意:版本号不是必需的,是为了区分新旧资源,如果不使用版本号,将会直接引用最新资源,除此之外还可以使用某个范围内的版本,查看所有资源等,具体使用方法如下:

// 加载任何Github发布、提交或分支
https://cdn.jsdelivr.net/gh/user/repo@version/file
// 加载 jQuery v3.2.1
https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.min.js
// 使用版本范围而不是特定版本
https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.min.js
https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js
// 完全省略该版本以获取最新版本
https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js
// 将“.min”添加到任何JS/CSS文件中以获取缩小版本,如果不存在,将为会自动生成
https://cdn.jsdelivr.net/gh/jquery/[email protected]/src/core.min.js
// 在末尾添加 / 以获取资源目录列表
https://cdn.jsdelivr.net/gh/jquery/jquery/
使用方法

1、创建仓库

在Github新建一个公开仓库,用于存放我们的静态文件资源。这里不再过多赘述,下面的链接是我的静态文件资源仓库。

https://github.com/Teae/Vir

2、使用jsDelivr访问资源

根据jsDelivr的文档,有很多种访问资源的方式,这里主要介绍三种。

通过releases访问

在仓库首页找到“releases”

3、新建releases

选择“Draft a new release”

标题输入版本号,根据你的需求即可,比如我这里是1.3

输入完毕后点击下方绿色按钮。

跳转到以下页面代表创建成功

根据jsDelivr的要求,文件路径为:

https://cdn.jsdelivr.net/gh/user/repo@version/file
https://cdn.jsdelivr.net/gh/user/repo@latest/file

访问仓库目录下的jquery文件,为以下链接:

https://cdn.jsdelivr.net/gh/Teae/[email protected]/jquery.js
https://cdn.jsdelivr.net/gh/Teae/Vir@latest/jquery.js

这种方案的优点是,可以区分版本,就算以后删掉了一些文件也可以通过旧的releases访问,而且可以及时更新缓存。

但是,需要在仓库里发布releases才能更新文件,不是很方便,所以适合存放基本不需要更新修改添加的静态文件。需要频繁修改或上传的文件不建议放到这里面来。

以上latest的方案不需要发布releases,可以直接从repo读取文件,而且实时更新缓存。更正:并不能实时更新缓存,随缘更新。

但是官方并不推荐使用这种方法,因为修改repo的文件后,如果没有修改网站的旧链接,可能会出问题。根据你自己的情况决定吧。

访问统计

jsDelivr还提供了文件列表和文件访问统计页面:

文件列表:https://cdn.jsdelivr.net/gh/user/repo/

比如我的:https://cdn.jsdelivr.net/gh/Teae/Vir/

访问统计:https://www.jsdelivr.com/package/gh/user/repo

比如我的:https://www.jsdelivr.com/package/gh/Teae/Vir

代码压缩:

jsDelivr还提供了代码压缩服务,比如将JS/CSS的代码压缩,优化访问速度。

只是前几次访问会执行压缩操作,速度比较慢。后面就会将文件缓存,速度不会再慢了。

方法:直接将访问链接的文件后缀改成.min.js即可,比如:

https://cdn.jsdelivr.net/gh/jquery/[email protected]/src/core.min.js

以下是官方介绍:

npm CDN

加载npm上托管的任何项目

https://cdn.jsdelivr.net/npm/package@version/file

加载文件的确切版本

https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js

使用版本范围而不是确切版本

https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js

https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js

如果您使用此功能,并且您所请求的文件在最新版本的软件包中不可用,则由于jsdelivr的版本回退功能,该链接将继续工作。jsdelivr将继续从旧版本的软件包中提供该文件,而不是因为404错误而失败。

按标签加载(不建议用于生产用途)

https://cdn.jsdelivr.net/npm/jquery@beta/dist/jquery.min.js

完全省略版本或使用“latest”加载最新版本(不推荐用于生产用途)

https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js

https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js

请求最新版本

(而不是“最新专业版”或“最新版本”)是危险的,因为主要版本通常会带来重大变化。只有你真的知道自己在做什么才这样做。

将“.min”添加到任何JS / CSS文件以获得缩小版本 – 如果不存在,jsdelivr将为您生成它。所有生成的文件都带有源映射,可以在开发过程中轻松使用:

https://cdn.jsdelivr.net/npm/[email protected]/github-markdown.min.css

缩小大文件可能需要几秒钟。但是,jsdelivr将所有生成的文件存储在永久存储中,因此此延迟仅适用于前几个请求。

省略文件路径以获取默认文件(目前不推荐)。此文件始终缩小:

https://cdn.jsdelivr.net/npm/[email protected]

https://cdn.jsdelivr.net/npm/jquery@3

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

如果默认文件不直接位于程序包的根目录中,则使用此功能可能会导致相对导入出现问题,例如源映射,图像或请求的文件引用的字体文件。

获取目录列表

https://cdn.jsdelivr.net/npm/[email protected]/

https://cdn.jsdelivr.net/npm/[email protected]/dist/

GitHub CDN

建议将npm用于支持更好用户体验的项目 – 在jsdelivr网站上可以搜索npm包,并且包页面显示其他有用信息,例如描述和主页链接。

jsdelivr使用永久S3存储来确保所有文件仍然可用,即使GitHub发生故障,或者作者删除了存储库或版本。仅在第一次直接从GitHub获取文件,或者当S3关闭时。

加载任何GitHub版本,提交或分支:

https://cdn.jsdelivr.net/gh/user/repo@version/file

加载文件的确切版本

https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.min.js

https://cdn.jsdelivr.net/gh/jquery/jquery@32b00373b3f42e5cdcb709df53f3b08b7184a944/dist/jquery.min.js

使用版本范围而不是确切版本

https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.min.js

https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js

如果您使用此功能,并且最新版本中未提供您请求的文件,则由于jsdelivr的版本回退功能,该链接将继续有效。jsdelivr将继续从旧版本提供该文件,而不是因为404错误而失败。

完全省略版本或使用“latest”加载最新版本(不推荐用于生产用途):

https://cdn.jsdelivr.net/gh/jquery/jquery@latest/dist/jquery.min.js

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

请求最新版本(而不是“最新专业版”或“最新版本”)是危险的,因为主要版本通常会带来重大变化。只有你真的知道自己在做什么才这样做。

将“.min”添加到任何JS / CSS文件以获得缩小版本 – 如果不存在,我们将为您生成它。所有生成的文件都带有源映射,可以在开发过程中轻松使用:

https://cdn.jsdelivr.net/gh/jquery/[email protected]/src/core.min.js

缩小大文件可能需要几秒钟。但是,jsdelivr将所有生成的文件存储在永久存储中,因此此延迟仅适用于前几个请求。

获取目录列表

https://cdn.jsdelivr.net/gh/jquery/[email protected]/

https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/

合并多个文件

jsdelivr的组合端点允许您在一个请求中从npm和GitHub端点加载多个文件:

https://cdn.jsdelivr.net/combine/url1,url2,url3

适用于单个文件的所有功能(版本范围,缩小等)也适用于此处。所有组合文件都带有源映射,可以在开发过程中轻松使用。

https://cdn.jsdelivr.net/combine/gh/jquery/[email protected]/dist/jquery.min.js,gh/twbs/[email protected]/dist/js/bootstrap.min.js

https://cdn.jsdelivr.net/combine/npm/[email protected]/dist/css/bootstrap.min.css,npm/[email protected]/dist/css/bootstrap-theme.min.css

组合大/多个文件可能需要几秒钟。但是,jsdelivr将所有生成的文件存储在永久存储中,因此此延迟仅适用于前几个请求。

WordPress CDN

从WordPress.org插件SVN repo加载任何插件

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

加载最新版本(不建议用于生产用途)

https://cdn.jsdelivr.net/wp/plugins/wp-slimstat/trunk/wp-slimstat.js

请求最新版本是危险的,因为新版本可能会带来重大变化。只有你真的知道自己在做什么才这样做。

从WordPress.org主题SVN repo加载任何主题

https://cdn.jsdelivr.net/wp/themes/project/version/file

加载文件的确切版本

https://cdn.jsdelivr.net/wp/themes/twenty-eightteen/1.7/assets/js/html5.js

参考资料

https://free.com.tw/jsdelivr/
https://www.jsdelivr.com/features


本帖有隐藏内容,请您登录后查看。


http://www.virplus.com/thread-1502.htm
转载请注明:2022-1-4 于 VirPlus 发表

推荐阅读
最新回复 (0)

    ( 登录 ) 后,可以发表评论!

    返回