从0开始利用github+jsdelivr进行静态js/css文件加速(cdn)

github官网:https://www.github.com

github是一个开源社交与企业项目管理平台,众多开发者在该平台

jsdelivr官网:https://www.jsdelivr.com/

这是一个静态文件的 CDN,由 MaxCDN 的 Dmitriy 与一群社区伙伴搭建。jsdelivr可以反向代理任意的 github、npm 文件,而且国内也有 CDN 节点,速度非常快。国内jsdelivr使用的是网宿的cdn服务,国外用户为Cloudflare+stackpath+fastly,加速效果明显。

限制:需要注意的是,部分资料显示github上传单文件最大限制为100M,仓库整体大小无限制,jsdelivr单文件最大支持为50M,个人非常不建议用于图片加速,只建议作为js/css/html/json/ini等小文件加速。

0.注册登陆github.com

1.创建git仓库


New repository

进入以下这个界面

Repository name为你的仓库名,后面会需要到,状态必须为Public才可以被jsdelivr所识别,其它的留空或者根据需要修改即可。

2.配置git命令行(已配置过可跳过)

官网:http://git-scm.com/download/win

国内镜像:https://npm.taobao.org/mirrors/git-for-windows/

选择最新版本下载,也可根据需要选择指定版本。下载安装好后如果不能直接在终端命令行使用则需要配置环境变量。

配置登陆请参考:https://www.cnblogs.com/crazytata/p/10083716.html 中在命令行中六到九步,本节以下部分内容为转载,如有侵权请原作者联系。

六. 执行登陆用户名和密码命令

git config --global user.email "[email protected]"
git config --global user.name "Your Name"

七. 生产密钥对

ssh-keygen -t rsa -C "[email protected]"

 八. 配置公钥私钥

 1. 登录到github:

 然后将 .ssh/id_rsa.pub中的内容复制到下图中的key中,并点击Add  SSH key

九. 检测密钥对是否可以使用:

ssh -T [email protected]

显示图中类似返回即可以正常使用。

3.修改你的仓库

使用git clone 下载第一步中创建的仓库,修改后提交推送即可,本人这里使用的是小乌龟可视化界面(相关文章:tortoisegit),就不给出具体的命令了。

4.通过jsdelivr调用

自行组合链接:【https://cdn.jsdelivr.net/gh/用户名/仓库名@仓库发布版本号/】即可,【@仓库发布版本号】可略去,默认为【@master】,官方不建议latest标签。

也可以直接在github仓库命令将页面中【http://github.com/】替换为【https://cdn.jsdelivr.net/gh/】后,在网址末尾增加【/】,打开就能看到仓库内容

例如:https://github.com/mumuy/browser

转换链接后为:https://cdn.jsdelivr.net/gh/mumuy/browser/(结尾必须为/)

例如:https://github.com/mumuy/browser/blob/master/Browser.js

转换后为:https://cdn.jsdelivr.net/gh/mumuy/[email protected]/Browser.js

jsdelivr还有个自动压缩代码的功能,在文件名后缀前增加【.min】即可自动压缩,非常方便。

例如:https://github.com/mumuy/browser/blob/master/Browser.js

转换后为:https://cdn.jsdelivr.net/gh/mumuy/[email protected]/Browser.min.js

经测试,所有内容不是实时刷新,有缓存时间,但是不会很长。

2020/08/02 补充

1.根据commit哈希值进行引用

虽然jsdelivr可以发右键申请清理缓存的api,但是几个月过去了都没有回音。附上一个曲线救国的方法:因为jsdelivr支持以仓库commit hash来选定加载,如果想直接更新缓存,可以使用hash选仓库的方法。

例如:https://github.com/mumuy/browser/commit/1aca38ad1d1bd59fd5dae789c4da068f4fc919a7/

https://github.com/mumuy/browser/blob/1aca38ad1d1bd59fd5dae789c4da068f4fc919a7/Browser.js

转换后为:

https://cdn.jsdelivr.net/gh/mumuy/[email protected]/Browser.min.js

2020/08/04补充

2.文件合并

jsdelivr自带文件合并功能,多css合并,多js合并,但是格式不能串(废话)。

使用方法:

https://cdn.jsdelivr.net/combine/文件1,文件2

示例:

https://cdn.jsdelivr.net/combine/gh/mumuy/[email protected]/Browser.js,npm/[email protected]/dist/jquery.min.js

此链接同时调用了gh/mumuy/[email protected]/Browser.js与npm/[email protected]/dist/jquery.min.js,首次访问会稍稍有点点慢,基本没有影响。

3.缓存清理Api

博主发邮件申请几个月过去了并没有消息,今天搜索相关资料的时候发现,只需要将请求链接的域名cdn.jsdelivr.net修改成purge.jsdelivr.net直接访问即可清理缓存。

示例:

请求文件:

https://cdn.jsdelivr.net/gh/mumuy/[email protected]/Browser.min.js

删除缓存:

https://purge.jsdelivr.net/gh/mumuy/[email protected]/Browser.min.js