什么是jsDelivr
在开始分享之前,我们需要了解一下jsDelivr
,它是一个非常流行的国外 CDN,可以用来加载各种 JavaScript 库、CSS 文件等静态资源。通过使用 jsDelivr,站长们可以减轻自己服务器的压力,并加快网站的访问速度。但是由于最近几年的滥用,加上一些已知原因,导致Jsdelivr在国内的备案被吊销,国内节点关停,速度较慢。
这里我找到了几个可用站点加速,且速度也很可观,使用方法只需替换链接即可!
[font color="#FF7F50"]1. cdn.iocdn.cc:括彩云国内CDN提供支持[/font]
[font color="#FF7F50"]2. s4.zstatic.net:多个云服务融合国内CDN提供支持[/font]
[font color="#FF7F50"]3. cdn.jsdmirror.com:多个云服务融合国内CDN提供支持[/font]
[font color="#FF7F50"]4. jsdelivr.topthink.com:阿里云CDN提供支持(无主页链接)[/font]
基本用法
jsDelivr
提供了简单且灵活的方式来加载前端资源。下面是几个主要的使用方法及相关参数的解释:
加载 JavaScript 库
你可以通过 jsDelivr
加载各种 JavaScript 库。以下是一个示例,使用 jQuery:
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
https://cdn.jsdelivr.net/npm/
:表示使用 jsDelivr 的 NPM 加速服务。
jquery
:库的名称。
@3.6.0
:特定版本号,可以更改为你需要的版本。
/dist/jquery.min.js
:资源文件的路径。
如果你想加载最新版本的库,可以省略版本号,但建议指定版本,以防止意外更新导致的问题。
加载 CSS 文件
你也可以用 jsDelivr 加载 CSS 文件。以下是 Bootstrap 的示例:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
bootstrap
:加载的库名称。@5.3.0
:库的版本号。
/dist/css/bootstrap.min.css:CSS 文件路径。
加载其他资源
jsDelivr 还支持加载其他资源类型,例如图片、字体文件等:
<img src="https://cdn.jsdelivr.net/gh/user/repo@version/path/to/image.png" alt="Example Image">
https://cdn.jsdelivr.net/gh/
:表示使用 GitHub 仓库加速服务。
user/repo
:指定 GitHub 用户和仓库。
@version
:可选版本号。
/path/to/image.png
:文件路径。
加速类型
jsDelivr 支持以下几种加速服务:
NPM 加速
:用于加载发布在 NPM 上的 JavaScript 库、前端框架等。示例:`https://cdn.jsdelivr.net/npm/package@version/file
cdnjs
加速`:提供经典的 JavaScript 库和插件的加速服务:示例:https://cdn.jsdelivr.net/cdnjs/library/version/file
WordPress
插件加速:专门为 WordPress 插件提供的加速服务。示例:https://cdn.jsdelivr.net/wp/plugin/version/file
GitHub 仓库加速
:直接从 GitHub 仓库加载资源,包括 JavaScript、CSS、图片等文件。示例:https://cdn.jsdelivr.net/gh/user/repo@version/file
优缺点总结
优点:全球分布节点,访问速度快;支持多种资源类型和源(NPM、GitHub、WordPress 等);具备版本控制功能,方便管理文件版本。
缺点:国内访问速度在部分地区可能不如国内优化的 CDN 站点,需要注意稳定性和响应速度。
基本守则
作为公益性质的加速站点,我们在使用过程中也应该遵守一些基本的规则:
不要用于个人图床加速
:图床消耗大量的带宽,不建议使用公共 CDN 来加速个人图片的访问,特别是那些大图或高频访问的图片,甚至有些人放一些视频在公共CDN上,这会极大的消耗公共资源。
不要加速字体文件
:字体文件通常非常大,会对带宽造成很大的压力。