github和npm利用jsdelivr做图床和组件库免费cdn加速(仅限海外)


因为廿壴(ganxb2)博客生产环境放到github+vercel,所以图床需要单独做cdn加速,不然整站速度太慢,但是小波又没钱买国内的主机商服务…巨贵,所以利用jsdelivr给github图床做免费cdn加速。

当然除了给github图床加速,像google-font被墙,或者自己写的组件库,可以自己下载后传到github或npm,再用jsdelivr加速做外链。


警告:
2022年jsdelivr国内已经无法使用,此博文cdn加速只能是博客面对海外使用,国内只有用其他图床。

简略写下github+jsdelivr加速的操作步骤,npm同理。


🧐第一步:github仓库创建发布版本

github仓库创建发布版本

点击仓库右侧的 Create a new release


🤔第二步:填写发布版本的tag、title和描述

填写发布版本的tag和title

注意:
1. tag才是第三步链接格式对应的@version
2. 优雅的tag格式请看图右边的说明


😚第三步:按jsdelivr的格式要求更改github链接CDN地址

jsdelivr[1]

jsdelivr.com

github:https://cdn.jsdelivr.net/gh/你的github用户名/仓库名@tag/文件路径

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// load any GitHub release, commit, or branch
// note: we recommend using npm for projects that support it
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 completely to get the latest one
// 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 to get a minified version
// if one doesn't exist, we'll generate it for you
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// load any project hosted on npm
https://cdn.jsdelivr.net/npm/package@version/file


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


// use a version range instead of a specific version
https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js
https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js


// omit the version completely to get the latest one
// you should NOT use this in production
https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js


// add ".min" to any JS/CSS file to get a minified version
// if one doesn't exist, we'll generate it for you
https://cdn.jsdelivr.net/npm/jquery@3.2.1/src/core.min.js


// omit the file path to get the default file
https://cdn.jsdelivr.net/npm/jquery@3.2


// add / at the end to get a directory listing
https://cdn.jsdelivr.net/npm/jquery/

😊关于CDN加速

小波简单翻译下:相当于疫情被F在社区,如果所需物质市场充足,那市场则不会外出采购,社区居民直接市场购买即可,如果缺少,则市场帮你去源站采购,居民再从市场购买。

市场就是CDN中转站,如果我们访问某个网站,例如廿壴(ganxb2)博客

如果前面你访问过,而且廿壴(ganxb2)博客也未做更新,那CDN就直接把你就近网络范围区的缓存数据给你,这样你很快就能查看网站信息;

如果你未访问过,那CDN则帮你去廿壴(ganxb2)博客源获取后,再按就近网络范围区的缓存点传输给你。


官方解读:百度百科[2]


🙂jsdelivr加速github和npm相关链接

THE END
github和npm利用jsdelivr做图床和组件库免费cdn加速(仅限海外)
https://blog.ganxb2.com/50860.html
作者
chopin gump chopin gump
许可协议
小尾巴
Stay Hungry, Stay Foolish「求知若饥, 虚心若愚」 — 廿壴(ganxb2)
微信

微信

支付宝

支付宝

🕐如果评论显示“刷新”无法加载,过一会再来康康~🕢 _(≧∇≦」∠)_ (填写常用邮箱即可快速收到回复通知~)