鱼梦江湖 @Yumengjh

简体中文

English

简体中文

English

外观

免费 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）分发（最适合图片/静态文件/构建产物）

准备

  1. 一个 public GitHub repo
  2. 把你要分发的资源放进去（建议放在 dist/ 或 assets/）
  3. 打 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/?meta
  • https://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.js

npm包

# 基本格式
https://cdn.jsdelivr.net/npm/包名@版本号/文件路径

# 示例
https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.js

GitHub仓库加速

基本使用方法

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.js

npm包分发服务

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>