免费 CDN 平台
约 2642 字大约 9 分钟
2026-02-14
CDN 的作用
“像传统 CDN 一样直接发文件”(拿到某个 .js/.css/.png 的静态地址)
- jsDelivr、UNPKG 都很适合
- 特点:URL 结构简单、缓存命中高(固定版本时)
“浏览器里直接 import npm 包(ESM)”(不用打包器)
- esm.sh 强项(自动把 npm 包转成可浏览器 import 的 ESM,还能做 target/alias/deps 等控制)
- UNPKG 也能做(前提:包本身提供 ESM 构建文件,例如
dist/*.module.js)
“查一个包到底有哪些文件 / 默认入口是什么”
- UNPKG 的
?meta很顺手(直接返回目录 JSON + SRI) - jsDelivr 有公开 API(甚至能给你推荐 entrypoints、统计数据)
注意:jsDelivr / UNPKG / esm.sh 本质都不是“给你上传文件的网盘”,它们是“从公开来源拉取并缓存分发”。
所以“上传自己的资源”的正确姿势是:把资源发布到它们支持的源站(最常见:GitHub 公共仓库、npm 公共包),然后用 CDN URL 分发。
开源分发 CDN(靠 GitHub/npm 做源)
- jsDelivr:
npm+GitHub两条线,支持版本范围、自动.min、combine 合并、公开 API、Purge 工具等 - UNPKG:专注 npm,一把梭“npm 文件服务器 + CDN”;
?meta//_meta特别好用(带 SRI) - esm.sh:把 npm 包转换成浏览器可直接
import的 ESM(还支持 target/deps/alias/bundle/worker/raw 等)
静态托管平台(你真的“上传”了资源,并自带 CDN)
适合你要托管非 npm 包、私有或更像传统站点的静态资源:
- Cloudflare Pages:官方描述包含“部署到 Cloudflare 网络”,并写明“所有计划 unlimited sites/seats/requests/bandwidth”(以它官网口径为准)
- Netlify / Vercel:也能免费起步,但有配额/计费体系(看它们 Pricing 页)
- GitHub Pages:是托管,不算 CDN;但免费、常用,能配自定义域名/HTTPS
上传你自己的资源:两条最主流路线
路线 1:GitHub 公共仓库 → jsDelivr(gh)分发(最适合图片/静态文件/构建产物)
准备
- 一个 public GitHub repo
- 把你要分发的资源放进去(建议放在
dist/或assets/) - 打 tag / release / commit hash 固定版本(生产强烈建议)
jsDelivr 的 GitHub 入口格式官方写得很清楚:https://cdn.jsdelivr.net/gh/user/repo@version/file,version 可以是 release/tag/commit/branch,官方也明确“不建议生产省略版本”
URL 怎么写(最常用三种)
- 固定 tag(推荐生产)
https://cdn.jsdelivr.net/gh/<user>/<repo>@v1.2.3/assets/logo.png - 固定 commit(最强可复现)
https://cdn.jsdelivr.net/gh/<user>/<repo>@<commit_sha>/dist/app.js - 用范围或分支(不推荐生产)版本范围示例:
@3/@3.6这种是可以的 ,省略版本拿最新:官方明确不建议生产
更新文件后,CDN 还是旧的
正确解法(推荐):发布新 tag / 新 commit,然后在你页面里改 URL(版本号变了就是天然 cache busting)
不得不用 @latest / 分支时:用 jsDelivr 的 Purge 工具去刷新缓存(它官方就写:否则可能要等一段时间)
目录浏览 / 找文件路径的小技巧
jsDelivr 官方提示:URL 末尾加 / 可以拿到目录 listing(找路径很爽)
例如:https://cdn.jsdelivr.net/gh/<user>/<repo>@v1.2.3/
进阶:combine 合并多个文件(减少请求数)
jsDelivr 有 combine endpoint:/combine/url1,url2,url3,npm 和 GitHub 的 URL 都能合并
示例(思路):把多个小脚本合成一个请求,适合 demo 或老项目“请求太多”的急救。
注意:combine 对“分支”场景有坑(组合结果可能只生成一次不更新),官方 issue 里讨论过这点——combine + branch 不要指望自动更新。
路线 2:发布 npm 公共包 → UNPKG / jsDelivr / esm.sh 分发(最适合 JS/CSS/组件库/可复用资源)
这条路线其实是“把你的资源当一个 npm 包发布”,然后 3 个 CDN 都能吃。
npm 包里该放什么(避免把源码/私密文件发出去)
发布 npm 包时,“哪些文件会被包含”是大坑。常见控制方式:
- 用
files字段白名单 - 用
.npmignore排除 - 可以用
npx npm-packlist预览将发布的内容(npm 文档/镜像文档里都有这个思路)
强烈建议:资源型包只发布 dist/、assets/、README、LICENSE,别把 .env、大图源文件、测试夹带出去。
发布 scoped 公共包(@scope/xxx)
npm 官方文档:scoped 包要公开发布,需要按它的流程(比如 --access public)
这一步做完,你的包就能:
- UNPKG:
https://unpkg.com/@scope/pkg@1.0.0/dist/index.js - jsDelivr:
https://cdn.jsdelivr.net/npm/@scope/pkg@1.0.0/dist/index.js - esm.sh:
https://esm.sh/@scope/pkg@1.0.0
版本策略(生产必读)
- 生产:固定精确版本(1.2.3)
- 可以用 jsDelivr 的版本范围(如
@3、@3.1),它官方也写了“版本回退”机制:如果新版本没这个文件,会继续从旧版本提供而不是 404(这对稳定性挺有用) - 不要用
@latest/ 省略版本(官方也说危险)
jsDelivr(npm + GitHub)超级实用技巧合集
npm 资源 URL 模板
https://cdn.jsdelivr.net/npm/<pkg>@<version>/<path>
“自动 minify”:你加 .min,它尽量给你现成或帮你生成
jsDelivr 文档:会先找同名 .min.js,找不到就自己 minify,所以你可以:.../dist/app.js → .../dist/app.min.js(很多时候直接可用)
UNPKG 超详细:找文件、拿 SRI、做 importmap
URL 模板(npm 文件服务器)
https://unpkg.com/<pkg>@<version>/<path>
?meta:列目录 + 文件信息(非常适合“我不知道路径”)
UNPKG 官方文档页里展示了 ?meta 的用法(返回 JSON 列表等) 典型用法:
https://unpkg.com/你的包@1.2.3/?metahttps://unpkg.com/你的包@1.2.3/dist/?meta
/_meta:拿单文件元数据(重点是 SRI integrity)
UNPKG 的 issue 里官方明确说:把请求路径前面加 /_meta 就能拿到包含 integrity 的元数据
例如思路:https://unpkg.com/_meta/<pkg>@<ver>/<path/to/file.js> 拿到的 JSON 里有 integrity,你就能在 HTML 里写:
esm.sh 超详细:把 npm 变成浏览器可 import 的 ESM
esm.sh 的定位就是:ESM CDN,并且它官方文档/README 对 query 参数写得很清楚
最基础:直接 import
import React from "https://esm.sh/react@18.3.1";依赖版本锁定:?deps=
esm.sh 官方:?deps=react@18.3.1,react-dom@18.3.1 这种格式 适合解决 peerDependencies 乱飘:
import useSWR from "https://esm.sh/swr?deps=react@18.3.1,react-dom@18.3.1";依赖替换:?alias=
esm.sh README/文档有 alias 的例子(经典:react → preact/compat)适合“想用更小的运行时”。
构建目标:?target=
esm.sh 支持 target(es2015/es2022/deno/node 等),用于兼容性/体积权衡
打包控制:?bundle=false / ?standalone
esm.sh 文档里列了 bundle/standalone 等选项,经验上:
- 小项目/原型:默认即可
- 想减少请求:standalone
- 遇到语义问题(side effects / import.meta.url 等):试试
bundle=false
“我要原文件,不要转译”:?raw / raw.esm.sh
esm.sh 官方提供 raw 模式 ,这在你想直接发 *.min.js、图片、或者“包里就是静态文件”时特别有用。
jsDelivr CDN完全指南
jsDelivr是一个免费的开源CDN(Content Delivery Network),专门为开源项目提供快速、可靠的静态资源分发服务。它支持多种资源来源,包括GitHub、npm、WordPress等。
工作原理
graph LR
A[用户请求] --> B[jsDelivr CDN]
B --> C{缓存检查}
C -->|命中| D[返回缓存内容]
C -->|未命中| E[从源站获取]
E --> F[GitHub/npm/WordPress]
F --> G[缓存并返回]
G --> A支持的资源类型
GitHub仓库
# 基本格式
https://cdn.jsdelivr.net/gh/用户名/仓库名@版本号/文件路径
# 示例
https://cdn.jsdelivr.net/gh/jquery/jquery@3.6.0/dist/jquery.min.jsnpm包
# 基本格式
https://cdn.jsdelivr.net/npm/包名@版本号/文件路径
# 示例
https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.jsGitHub仓库加速
基本使用方法
URL格式规则
# 完整格式
https://cdn.jsdelivr.net/gh/用户名/仓库名@分支或标签/文件路径
# 使用默认分支(推荐)
https://cdn.jsdelivr.net/gh/用户名/仓库名/文件路径
# 指定分支
https://cdn.jsdelivr.net/gh/用户名/仓库名@main/文件路径
# 指定标签版本
https://cdn.jsdelivr.net/gh/用户名/仓库名@v1.0.0/文件路径实际应用示例
图片资源加速
<!-- GitHub原始链接(慢) -->
<img src="https://raw.githubusercontent.com/name/my-images/main/logo.png">
<!-- jsDelivr CDN链接(快) -->
<img src="https://cdn.jsdelivr.net/gh/name/my-images/logo.png">JavaScript库加速
<!-- 加载开源JavaScript库 -->
<script src="https://cdn.jsdelivr.net/gh/highlightjs/highlight.js@11.8.0/build/highlight.min.js"></script>
<!-- 加载CSS样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/highlight.js@11.8.0/build/sty版本管理策略
使用标签版本(推荐)
# 使用具体版本标签,确保稳定性
https://cdn.jsdelivr.net/gh/jquery/jquery@3.6.0/dist/jquery.min.js
# 使用语义化版本范围
https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js # 最新3.x版本使用分支版本
# 使用主分支(内容可能变化)
https://cdn.jsdelivr.net/gh/username/repo@main/file.js
# 使用开发分支
https://cdn.jsdelivr.net/gh/username/repo@develop/file.jsnpm包分发服务
npm包CDN使用
基本语法
# 完整格式
https://cdn.jsdelivr.net/npm/包名@版本号/文件路径
# 使用最新版本
https://cdn.jsdelivr.net/npm/包名/文件路径
# 指定版本范围
https://cdn.jsdelivr.net/npm/包名@^1.0.0/文件路径常用前端库示例
Vue.js
<!-- Vue 3 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<!-- Vue 2 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>React
<!-- React 开发版 -->
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js"></script>
<!-- React 生产版 -->
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>工具库
<!-- Lodash -->
<script src="https://cdn.jsdelivr.net/npm/lodash@4/lodash.min.js"></script>
<!-- Moment.js -->
<script src="https://cdn.jsdelivr.net/npm/moment@2/moment.min.js"></script>
<!-- Axios -->
<script src="https://cdn.jsdelivr.net/npm/axios@1/dist/axios.min.js"></script>包文件浏览
浏览包内容
# 查看包的所有文件
https://cdn.jsdelivr.net/npm/包名/
# 查看特定版本的文件
https://cdn.jsdelivr.net/npm/包名@版本号/
# 示例:查看Vue包内容
https://cdn.jsdelivr.net/npm/vue@3/自动文件选择
# jsDelivr会自动选择合适的文件
https://cdn.jsdelivr.net/npm/vue@3 # 自动选择 dist/vue.global.js
# 手动指定文件
https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.js组合加载功能
多文件合并
<!-- 合并多个文件为一个请求 -->
<script src="https://cdn.jsdelivr.net/combine/npm/jquery@3,npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"></script>
<!-- 合并CSS文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/npm/bootstrap@5/dist/css/bootstrap.min压缩和优化
# 自动压缩(添加.min后缀)
https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.min.js
# 原始文件
https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js高级功能与配置
API接口使用
包信息查询
// 获取包的基本信息
fetch('https://data.jsdelivr.com/v1/package/npm/vue')
.then(response => response.json())
.then(data => console.log(data));
// 获取包的版本列表
fetch('https://data.jsdelivr.com/v1/package/npm/vue/versions')
.then(response => response.json())
.then(data => console.log(data));文件列表查询
// 获取包的文件列表
fetch('https://data.jsdelivr.com/v1/package/npm/vue@3/flat')
.then(response => response.json())
.then(data => console.log(data.files));
// 获取GitHub仓库文件列表
fetch('https://data.jsdelivr.com/v1/package/gh/jquery/jquery@3.6.0/flat')
.then(response => response.json())
.then(data => console.log(data.files));统计信息查询
// 获取包的下载统计
fetch('https://data.jsdelivr.com/v1/package/npm/vue/stats')
.then(response => response.json())
.then(data => console.log(data));缓存控制
缓存策略理解
缓存策略理解
默认缓存时间
- 稳定版本:7天
- 预发布版本:1天
- 分支版本:12小时
缓存刷新
- 自动刷新:根据版本更新
- 手动刷新:通过API接口
缓存刷新方法
// 通过API刷新缓存
fetch('https://purge.jsdelivr.net/npm/package@version/file', {
method: 'POST'
});
// 示例:刷新特定文件缓存
fetch('https://purge.jsdelivr.net/npm/vue@3/dist/vue.global.js', {
method: 'POST'
});性能优化技巧
预加载和预连接
<!-- DNS预解析 -->
<link rel="dns-prefetch" href="//cdn.jsdelivr.net">
<!-- 预连接 -->
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<!-- 预加载关键资源 -->
<link rel="preload" href="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js" as="script">资源优先级控制
<!-- 高优先级资源 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js" defer></script>
<!-- 低优先级资源 -->
<script src="https://cdn.jsdelivr.net/npm/lodash@4/lodash.min.js" async></script>