文档
Docs
JsDelivr 使用教学

JsDelivr 使用教学

JsDelivr 使用教学：快速搭建免费CDN加速服务

什么是JsDelivr？

JsDelivr是一个免费的开源CDN（内容分发网络）服务，专门为npm和GitHub上的开源项目提供快速、可靠的文件托管和分发服务。它有以下优势：

  • 完全免费使用
  • 全球多个节点，访问速度快
  • 支持npm和GitHub仓库
  • 自动启用HTTP/2和gzip压缩
  • 提供稳定可靠的版本管理功能

https://www.jsdelivr.com/about

jsDelivr 是一个免费的开源 CDN（内容分发网络），它允许用户快速、可靠地加载 JavaScript 库、CSS 文件和其他静态资源。以下是关于 jsDelivr 的一些关键点：

  1. 开源和免费：jsDelivr 提供的服务是完全免费的，并且基于开源项目构建。
  2. 广泛支持的库：它支持大量的流行前端库和框架，包括但不限于 jQuery, React, Vue.js, Bootstrap 等等。此外，用户还可以托管自己的 npm 包或其他静态文件。
  3. 高性能与可靠性：通过使用全球分布的数据中心，jsDelivr 能够提供非常快的加载速度以及高可用性，确保网站或应用即使在高流量情况下也能保持良好的性能。
  4. 安全特性：jsDelivr 采取了多种措施来保证服务的安全性，比如强制 HTTPS 加密传输以保护数据不被窃听；同时，对于公开仓库中的内容，还提供了完整性校验机制，防止中间人攻击篡改代码。
  5. 易于集成：开发者可以很容易地将 jsDelivr 集成到他们的项目中，只需简单修改 HTML 文件中的链接即可开始使用。
  6. 社区驱动：作为一个开放源码项目，jsDelivr 得到了广大开发者社区的支持和发展贡献，这意味着它可以持续改进并适应新的技术趋势。
    总之，jsDelivr 是一个强大而灵活的工具，非常适合需要高效加载第三方库或自定义资源的 Web 开发者。

基础使用方式

1. 加载GitHub上的文件

<!-- 基础格式 -->
https://cdn.jsdelivr.net/gh/<用户名>/<仓库名>@<版本号>/<文件路径>

<!-- 具体示例 -->
<script src="https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.min.js"></script>

2. 加载npm包中的文件

<!-- 基础格式 -->
https://cdn.jsdelivr.net/npm/<包名>@<版本号>/<文件路径>

<!-- 具体示例 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.min.js"></script>

高级使用技巧

1. 自动选择最新版本

使用latest代替具体版本号，JsDelivr会自动选择最新的稳定版本（缓存时间1小时）：

<script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>

2. 使用语义化版本范围

<!-- 匹配3.x.x的最高版本 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<!-- 匹配3.6.x的最高版本 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

3. 文件路径优化

如果在项目根目录下有package.json文件，JsDelivr会自动识别main或module字段指定的入口文件，从而可以省略文件名：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/"></script>

最佳实践

  1. 生产环境使用固定版本：避免版本自动更新导致的不兼容
<!-- 推荐 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.min.js"></script>

<!-- 不推荐 -->
<script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.global.min.js"></script>
  1. 充分利用HTTP/2：合并小文件请求，减少连接数
<script src="https://cdn.jsdelivr.net/combine/npm/[email protected]/dist/jquery.min.js,npm/[email protected]/dist/js/bootstrap.min.js"></script>
  1. 使用.min压缩版本：减小文件体积，提升加载速度

常见问题解答

Q1: 文件更新后多久能在JsDelivr上生效？

GitHub上的变更通常需要10-15分钟才会在JsDelivr上生效，npm包的更新则需要30-60分钟。

Q2: 如何清除JsDelivr缓存？

在URL末尾添加?clearcache=1可以强制清除缓存（不适用于生产环境）：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js?clearcache=1"></script>

Q3: 有使用限额吗？

JsDelivr没有明确的请求限额，但如果单文件月访问量超过2TB，建议联系JsDelivr团队。

通过以上教学，你可以轻松使用JsDelivr为你的项目提供快速、稳定的资源加载服务。无论是个人项目还是商业项目，JsDelivr都是理想的CDN选择方案。