利用jsdelivr给github图床和npm组件库免费cdn加速

2.7k 字 23 分钟编程 / 前端写作于 2022年9月25日下午

🙂前言

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

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

警告：
2022年jsdelivr国内已经无法正常使用，小波自己测试发现勉强还有两个未被污染地址暂时可以使用，文章末尾已经分享，不过最好想其他办法做图床。

简略写下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/文件路径

// 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：

// 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/