1. github CDN
查看jsdelivr文档github CND那小节,可以看到我们可以如下内容
- 加载任何github仓库的release、commit、branch
https://cdn.jsdelivr.net/gh/user/repo@version/file
- 加载指定版本的文件
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js https://cdn.jsdelivr.net/gh/jquery/jquery@32b00373b3f42e5cdcb709df53f3b08b7184a944/dist/jquery.min.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来加载最新的release版本(不推荐在生产环境中使用)
https://cdn.jsdelivr.net/gh/jquery/jquery@latest/dist/jquery.min.js https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js
- 在任何JS / CSS文件中添加“ .min”以获得缩小版本-如果不存在,我们将为您生成。 所有生成的文件都带有源映射,可以在开发期间轻松使用:
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js
- 获取目录清单
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/ https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/
有了以上的内容,我们就可以通过github来托管我们的静态资源文件,然后使用jsdelivr来加载了。
2. github相关操作
在进行jsdelivr加载之前,我们需要在github上进行一系列操作。
新建github仓库
进入个人github 看板页面,点击New,既可以进入创建新的仓库页面,相关信息可以自定义。
克隆仓库
点击Create repository之后,会自动跳转到仓库主页中去,点击Code按钮,复制clone连接
进入你想存放仓库的文件夹,输入下面的命令进行仓库克隆
git clone 复制的连接
添加静态资源文件
将仓库克隆到本地之后,把你想要加载的静态资源文件存放到本地仓库中,然后使用如下命令推送到github上
git add --al
git commit
git push
生成release
推送完成之后,点击仓库右侧的new release按钮,新建一个release版本,信息由你自己定义,然后点击publish按钮即可。
3. 使用jsdelivr加载
完成了上述步骤之后,就可以通过jsdelivr进行加载了,在我的仓库中我存放了bootstrap4.3.1的css文件以及js文件,在需要引入的html文件中引入方式如下
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/weijiang1994/BlogCDN@1.0/bootstrap4/bootstrap.4.3.1.min.css">
<script src="https://cdn.jsdelivr.net/gh/weijiang1994/BlogCDN@1.0/bootstrap4/bootstrap.4.3.1.min.js"></script>
引用的格式如下
https://cdn.jsdelivr.net/gh/github用户名/github仓库名@release版本号/文件路径
4.QA
Q:jsdelivr能提高加载速度吗?
A:jsdelivr在国内有很多节点,因此裸连的速度也是相当的客观。
Q:删除github仓库还能生效吗?
A:jsdelivr使用永久性的S3存储,以确保即使GitHub发生故障,或者其作者删除了存储库或发行版,所有文件仍然可用。 仅在第一次或S3故障时才直接从GitHub提取文件。
Q:其他玩法?
A:在你自己的服务器带宽很低的情况下,可以通过这种方式加载大文件,测试了加载12M的图片文件,仅仅耗时4s不到。