机器宽带太小静态文件加载太慢?教你利用jsDelivr白嫖全球超高速静态资源访问服务!

2020-07-03T23:11:00

因为服务器在国外&服务器带宽小,导致静态资源请求速度慢,最终导致全站访问速度被拖慢,是站长们要面对的问题。最常用的解决方案是使用国内IDC厂商提供的对象存储(镜像回源)+CDN来提升静态资源访问速度,但这难免会产生费用。

jsDelivr是什么


https://www.jsdelivr.com/
jsDelivr由ProspectOne维护的公共库,使用的融合CDN技术,由Cloudflare、Fastly、StackPath、QUANTIL等CDN供应商提供了全球超过750个CDN节点。
最重要的是,jsDelivr在中国大陆也拥有超过数百个节点,因为jsDelivr拥有正规的ICP备案,解决了中国大陆的访问速度优化,实现真正的全球极速低延迟体验。
jsDelivr是免费的、不限制带宽的,可以加速NPM、Github内的文件。
本文采用的方法就是将静态文件资源放到Github的仓库内,再使用jsDelivr进行加速访问,达到完全零成本优化访问速度。

创建仓库


在Github新建一个公开仓库,用于存放我们的静态文件资源。这里不再过多赘述,下面的链接是我的静态文件资源仓库。
https://github.com/FeiYuab/blog
使用jsDelivr访问资源


根据jsDelivr的文档,有很多种访问资源的方式,这里介绍使用releases的方法。
通过releases访问


在仓库首页找到“releases”

选择“Draft a new release”
标题输入版本号,根据你的需求即可,比如我这里是1.0
输入完毕后点击下方绿色按钮。

下图就是创建成功

根据jsDelivr的要求,文件路径为:https://cdn.jsdelivr.net/gh/user/repo@version/file
以我的为例,访问仓库目录下的/assets/img/bg-ico.png文件,为以下链接:
//www.feiyubk.com/usr/uploads/other/8a3c476833db661e107be0f4ae219df2.png
可以正常访问,成功~

这种方案的优点是,可以区分版本,就算以后删掉了一些文件也可以通过旧的releases访问,而且可以及时更新缓存。
美中不足的是,需要在仓库里发布个releases才能更新文件,并不是很方便,所以适合于存放基本不需要更新修改添加的静态文件。需要频繁修改或上传的文件不建议放到这里面来。

访问统计


jsDelivr还提供了文件列表和文件访问统计页面:
文件列表:https://cdn.jsdelivr.net/gh/user/repo/
比如我的:https://cdn.jsdelivr.net/gh/FeiYuab/blog/

访问统计:https://www.jsdelivr.com/package/gh/user/repo
比如我的:https://www.jsdelivr.net/package/gh/FeiYuab/blog

代码压缩


jsDelivr还提供了代码压缩服务,比如将JS/CSS的代码压缩,优化访问速度。
只是前几次访问会执行压缩操作,速度比较慢。后面就会将文件缓存,速度不会再慢了。
直接将访问链接的文件后缀改成.min.js即可,比如:
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js

当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »