展开

文章目录

修改历史

修改历史记录

  1. 2021-01-21 11:10:58
  2. 2021-01-20 09:41:07

使用github+jsdelivr加速网站静态资源访问速度

2021-01-18 14:24:12 应用部署 1324

简介

网站的加载速度取决于很多因素,比如服务器带宽资源,加载资源的大小,引用cdn的加载速度等等。最近在v站上发帖,很多朋友说jsdelivr的cdn速度是当下最快的,我将本网站上很多cdn引用更改为jsdelivr,发现速度确实快了不少,但是发现有些资源jsdelivr上没有,查看文档可以使用下面的方法来解决。

1. github CDN

查看jsdelivr文档github CND那小节,可以看到我们可以如下内容

  1. 加载任何github仓库的release、commit、branch
    https://cdn.jsdelivr.net/gh/user/repo@version/file
  2. 加载指定版本的文件
    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
  3. 使用范围版本代替指定版本
    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
  4. 忽略版本使用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
  5. 在任何JS / CSS文件中添加“ .min”以获得缩小版本-如果不存在,我们将为您生成。 所有生成的文件都带有源映射,可以在开发期间轻松使用:
    https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js
  6. 获取目录清单
    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 repo

克隆仓库

点击Create repository之后,会自动跳转到仓库主页中去,点击Code按钮,复制clone连接

git clone

进入你想存放仓库的文件夹,输入下面的命令进行仓库克隆

git clone 复制的连接

添加静态资源文件

将仓库克隆到本地之后,把你想要加载的静态资源文件存放到本地仓库中,然后使用如下命令推送到github上

git add --al
git commit
git push

生成release

推送完成之后,点击仓库右侧的new release按钮,新建一个release版本,信息由你自己定义,然后点击publish按钮即可。

release

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不到。

2条评论