详细的使用说明和最佳实践
使用 jsDelivr 镜像非常简单,只需将原始的 cdn.jsdelivr.net 替换为我们的镜像域名即可。
<!-- 原始地址 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<!-- 镜像地址 -->
<script src="https://jsdelivr.cdn.ihwx.cn/npm/vue@3/dist/vue.global.js"></script>
访问 NPM 上发布的任何公开包。
https://jsdelivr.cdn.ihwx.cn/npm/包名@版本号/文件路径
示例:
/npm/vue@3/dist/vue.global.js - Vue.js 3.x/npm/react@18/umd/react.production.min.js - React 18/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css - Bootstrap CSS/npm/@popperjs/core@2 - 使用 @ 开头的 scoped 包直接引用 GitHub 仓库中的文件。
https://jsdelivr.cdn.ihwx.cn/gh/用户名/仓库名@版本号/文件路径
示例:
/gh/jquery/jquery@3.6.0/dist/jquery.min.js/gh/twbs/bootstrap@5.1.3/dist/css/bootstrap.min.css在一个请求中加载多个文件,减少 HTTP 请求数量。
https://jsdelivr.cdn.ihwx.cn/combine/文件1,文件2,文件3
示例:
/combine/npm/jquery@3.6.0,npm/bootstrap@5.1.3/dist/js/bootstrap.min.js
| 语法 | 说明 | 示例 |
|---|---|---|
@3.6.0 |
精确版本 | /npm/jquery@3.6.0 |
@3.6 |
次版本号(3.6.x) | /npm/jquery@3.6 |
@3 |
主版本号(3.x.x) | /npm/jquery@3 |
| 不指定 | 最新版本 | /npm/jquery |
⚠️ 注意:不指定版本号或使用范围版本可能会导致缓存失效,建议在生产环境中使用精确版本号。
我们的镜像服务会添加以下自定义响应头,帮助您了解请求状态:
| 响应头 | 说明 | 可能的值 |
|---|---|---|
xz-cache |
缓存状态 | mirror-cache - 缓存命中origin - 回源 |
mirror-cache-expiration |
缓存失效时间 | GMT 格式时间(仅在缓存命中时返回) |
X-Proxy-By |
代理标识 | jsDelivr-Mirror |
X-Source-Host |
源站地址 | 实际使用的 jsDelivr 源站 |
# 使用 curl 查看响应头
curl -I https://jsdelivr.cdn.ihwx.cn/npm/vue@3/dist/vue.global.js
# 或使用浏览器开发者工具
# F12 → Network → 选择请求 → Headers
资源缓存时间为 24 小时。
<!-- ✅ 推荐 -->
<script src="https://jsdelivr.cdn.ihwx.cn/npm/vue@3.2.45/dist/vue.global.js"></script>
<!-- ⚠️ 不推荐 -->
<script src="https://jsdelivr.cdn.ihwx.cn/npm/vue/dist/vue.global.js"></script>
<script src="https://jsdelivr.cdn.ihwx.cn/npm/vue@3/dist/vue.global.js"
integrity="sha384-..."
crossorigin="anonymous"></script>
对于小文件或依赖关系紧密的文件,可以使用组合功能减少 HTTP 请求。
访问 统计页面 查看服务使用情况和性能指标。
A: 我们的镜像服务采用多源站故障转移机制,确保高可用性。同时提供智能缓存,进一步提高稳定性。
A: 目前没有流量限制,完全免费使用。
A: 缓存会在 24 小时后自动过期。如需立即更新,请联系管理员。
A: 是的,我们的服务完全支持 HTTPS 加密传输。
A: 可以,本服务完全免费,可用于个人和商业项目。
遇到问题?