Back to blog
Apr 03, 2025
3 min read

JSD 镜像站使用教程

如何正确使用 JSD 镜像站进行资源加速,包括 NPM、GitHub、CDNJS 及 WordPress 资源的加载方法。

JSD 镜像站简介

JSD 是一个基于 Cloudflare Workers、Vercel、FastCDN 和多吉云(DogeCloud) 搭建的 JsDelivr 镜像站,旨在提供一个相对稳定的公共 CDN 解决方案。由于原版 JsDelivr 在国内的可用性较差,本项目通过多种反代技术优化访问速度,让国内外用户都能更流畅地使用开源前端资源。

目前,JSD 支持以下几种加速方式:

  • NPM 资源加速(适用于前端库、JS 框架、CSS 组件库)
  • GitHub 资源加速(适用于 GitHub 公开仓库的静态资源,如 JS、CSS、图片)
  • CDNJS 资源加速(适用于经典的 JavaScript 库和插件)
  • WordPress 插件加速(适用于 WordPress 站点的插件、主题资源)

注意:JSD 仍处于测试阶段,暂不公开使用!


1. NPM 资源加速

如果你需要加载 NPM 上的 JavaScript 库(如 jQuery、Vue、React),可以使用以下格式:

<script src="https://jsd.liiiu.cn/npm/package@version/file"></script>

示例 1:加载 jQuery

<script src="https://jsd.liiiu.cn/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  • jquery 是库的名称。
  • @3.6.0 指定了版本号,可以换成 @latest 以获取最新版本,但推荐使用固定版本以确保兼容性。
  • /dist/jquery.min.js 是资源的路径。

示例 2:加载 Vue 3

<script src="https://jsd.liiiu.cn/npm/vue@3.2.47/dist/vue.global.prod.js"></script>
  • vue 是库的名称。
  • @3.2.47 指定了 Vue 3 的具体版本号。
  • /dist/vue.global.prod.js 是 Vue 生产环境的完整构建版本。

2. GitHub 资源加速

如果你的资源存放在 GitHub 仓库,可以使用 JSD 来加速访问,格式如下:

https://jsd.liiiu.cn/gh/用户名/仓库名@版本/文件路径

示例 1:加载 GitHub 仓库中的图片

<img src="https://jsd.liiiu.cn/gh/willow-god/assets@main/logo.png" alt="Logo">
  • willow-god/assets 是 GitHub 仓库的路径。
  • @main 指定了 main 分支,你也可以换成 @tag@commit
  • /logo.png 是文件的相对路径。

示例 2:加载 GitHub 上的 JS 文件

<script src="https://jsd.liiiu.cn/gh/facebook/react@v18.2.0/umd/react.production.min.js"></script>
  • 这里加载的是 React 官方仓库中的 react.production.min.js 文件。

3. CDNJS 资源加速

CDNJS 是一个全球知名的 JavaScript 库加速服务,JSD 也提供了相应的加速代理。使用方式如下:

https://jsd.liiiu.cn/cdn/library/version/file

示例 1:加载 Bootstrap

<link rel="stylesheet" href="https://jsd.liiiu.cn/cdn/bootstrap/5.3.0/css/bootstrap.min.css">

示例 2:加载 Font Awesome

<link rel="stylesheet" href="https://jsd.liiiu.cn/cdn/font-awesome/6.4.0/css/all.min.css">

4. WordPress 插件加速

如果你在使用 WordPress,可以通过 JSD 来加速插件资源,例如:

https://jsd.liiiu.cn/wp/plugin/version/file

示例:加载 Yoast SEO 插件

<script src="https://jsd.liiiu.cn/wp/yoast-seo/20.0/js/script.min.js"></script>

5. 使用 NPM 配置 JSD

如果你想在前端项目中使用 JSD 作为包管理器的镜像,可以通过 NPM registry 配置

npm set registry https://jsd.liiiu.cn/npm/

这样,你在安装依赖时,NPM 将自动从 JSD 镜像下载,而不是默认的 npmjs.org:

npm install lodash

6. 额外参数说明

JSD 允许你使用一些额外参数来优化加载体验:

参数作用示例
@latest获取最新版本https://jsd.liiiu.cn/npm/vue@latest/dist/vue.global.prod.js
@commit加载指定提交https://jsd.liiiu.cn/gh/user/repo@abcdef/file.js
min.js加载压缩版本https://jsd.liiiu.cn/npm/jquery@3.6.0/dist/jquery.min.js
?raw=true直接获取原始文件https://jsd.liiiu.cn/gh/user/repo@main/file.txt?raw=true

7. 使用注意事项

  1. JSD 仍处于测试阶段,可能会有不稳定情况,请谨慎用于生产环境。
  2. 防盗链机制已启用,如果你的站点未在白名单内,可能会遇到 403 错误。
  3. 国内外网络环境不同,速度会有所差异,请根据需要选择最适合的加速方式。
  4. 如果某些资源无法加载,建议检查路径是否正确,或者尝试手动更换版本号。
  5. 暂不提供 API 访问,未来可能会增加更多功能,敬请期待。

总结

JSD 镜像站提供了一种 快速、稳定 的 JsDelivr 代理方案,支持 NPM、GitHub、CDNJS 和 WordPress 资源加速,能够有效缓解国内访问 JsDelivr 资源的困难。

但请注意,本项目仍处于测试阶段,暂不公开使用,如果你对 JSD 感兴趣,欢迎关注后续更新。


希望这篇教程能帮助你更好地理解和使用 JSD。如果你在使用过程中遇到问题,欢迎反馈!

—— LiuShen