How to Use jsDelivr CDN

博客上用了很多js和css,如果都通过服务器加载,加载速度会很慢(一开始我用这个主题,GithubPages托管的时候,第一次加载用来40s+)。所以需要把js和css文件放到CDN上。
我知道的公共CDN有BootCDNJSDELIVR
jsdelivr可以直接加载github上的文件,bootcdn不行。
我原来使用的是BootCDN,但是这玩意比jsdelivr慢,并且只能用官方的库,所以改用了jsdelivr。

jsdelivr的加载方法

Github

一言蔽之,就是https://cdn.jsdelivr.net/gh/用户名称/仓库名称@版本号/目录

详细版:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 加载任何GitHub的发布、提交或分支
// 注意:我们建议在支持npm的项目中使用npm
https://cdn.jsdelivr.net/gh/user/repo@version/file

// 加载 jQuery v3.2.1
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/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

// 完全省略版本以获得最新的版本
// 你不应该在生产中使用它
https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js

// 添加 ".min" 到任何js/css文件
// 如果它不存在,我们将为您生成它(并帮你压缩
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js

// 在末尾添加 "/" 以获得目录列表
https://cdn.jsdelivr.net/gh/jquery/jquery/

npm

gh换成npm,没有用户名。其他不变。

1
https://cdn.jsdelivr.net/npm/包名@版本号/目录

刷新CDN

把链接中的https://cdn.jsdelivr.net/换成https://purge.jsdelivr.net/就行了。

My blog uses many JS and CSS files. If they are all loaded through the server, the loading speed will be very slow (when I first used this theme hosted on GitHub Pages, the initial load took over 40 seconds). Therefore, it’s necessary to place JS and CSS files on a CDN.

The public CDNs I’m aware of are BootCDN and JSDELIVR.
jsDelivr can directly load files from GitHub, while BootCDN cannot.
I originally used BootCDN, but it’s slower than jsDelivr and only supports official libraries, so I switched to jsDelivr.

How to Load from jsDelivr

GitHub

In a nutshell, it’s https://cdn.jsdelivr.net/gh/username/repository@version/directory.

Detailed version:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Load any GitHub release, commit, or branch
// Note: We recommend using npm for npm-supported projects
https://cdn.jsdelivr.net/gh/user/repo@version/file

// Load jQuery v3.2.1
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js

// Use a version range instead of a specific version
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

// Omit the version entirely to get the latest version
// You should not use this in production
https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js

// Add ".min" to any JS/CSS file
// If it doesn't exist, we will generate it for you (and minify it)
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js

// Add "/" at the end to get a directory listing
https://cdn.jsdelivr.net/gh/jquery/jquery/

npm

Replace gh with npm, without a username. Everything else remains the same.

1
https://cdn.jsdelivr.net/npm/package-name@version/directory

Refreshing the CDN

Simply replace https://cdn.jsdelivr.net/ in the URL with https://purge.jsdelivr.net/.


How to Use jsDelivr CDN
https://tokisaki.top/blog/jsdelivr-cdn/
作者
Tokisaki Galaxy
发布于
2021年2月28日
许可协议