使用jsDelivr加速静态文件

一、前言

jsDelivr是一个开源的 CDN（内容分发网络）服务，主要用于加速JavaScript库、CSS样式表、图像等的传输。

1.加速前端资源加载

jsDelivr提供了一个全球性的CDN，通过将静态资源分发到多个节点，用户可以从离他们地理位置最近的节点获取资源，从而提高加载速度。

2.支持多种前端库和框架

jsDelivr支持多种流行的前端库和框架，包括但不限于jQuery、Bootstrap、Vue.js、React等。

3.无需注册即可使用

使用jsDelivr并不需要注册账户，可以直接通过CDN的链接引用所需的资源，易于集成到各种项目中。

4.版本控制

jsDelivr允许开发者使用特定的版本号来引用库，确保项目在使用新版本时不会受到影响。

5.支持 GitHub 和 npm 上的资源

jsDelivr可以直接从GitHub仓库和npm包管理器获取资源，更方便引用各种开源项目中的文件。

二、jsDelivr使用方法

1.构造jsDelivr链接

# jsDelivr的CDN链接格式
https://cdn.jsdelivr.net/npm/{package}@{version}/{file}

# 举例：使用jsDelivr获取jQuery特定版本中的文件
https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js

# 举例：使用jsDelivr获取jQuery最新版本，将版本号替换为latest
https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js

# 举例：使用jsDelivr获取目录列表，以bootstrap包为例
https://cdn.jsdelivr.net/npm/bootstrap/

{package}: 包名，表示要请求的npm包

{version}: 包的版本号，表示要请求的特定版本

{file}: 文件路径，表示要请求的具体文件

注：在构建jsDelivr链接时，尽量指定明确的版本号，而不是使用latest。这样可以确保应用在未来的更新中不会受到影响。

2.在项目里找到原始文件的链接，将其替换为 jsDelivr CDN 的链接

<!-- 原始链接 -->
<script src="https://example.com/path/to/your/file.js"></script>

<!-- 替换为jsDelivr链接 -->
<script src="https://cdn.jsdelivr.net/npm/package-name@version/path/to/your/file.js"></script>

注：使用CDN加速并不适用于所有文件，有一些文件可能不适合被缓存。

三、解决jsdelivr缓存问题

1.版本号或时间戳

在请求文件时，可以通过在文件的URL中添加版本号或时间戳的方式来绕过缓存。

1	<script src="https://cdn.jsdelivr.net/npm/package-name@1.0.0/file.js?version=1.1"></script>

2.使用不同的CDN路径

jsDelivr提供了多个CDN路径，可以尝试切换到其他路径来获取最新的文件。

<!-- 使用cdn.jsdelivr.net/npm/ -->
<script src="https://cdn.jsdelivr.net/npm/package-name@1.0.0/file.js"></script>

<!-- 或使用cdn.jsdelivr.net/gh/ -->
<script src="https://cdn.jsdelivr.net/gh/user/repo@1.0.0/file.js"></script>