CDN介绍

内容分发网络（英语：Content Delivery Network或Content Distribution Network，缩写：CDN）是指一种透过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。

通俗来讲，能加速访问静态资源的速度，项目中分离静态资源能减轻对服务器的负载。

免费CDN - jsDelivr

访问地址： jsDelivr

jsDelivr提供npm，GitHub，WordPress等项目的镜像。

jsDelivr+GitHub 使用方法

官网上给的示例

// load any GitHub release, commit, or branch
// note: we recommend using npm for projects that support it
https://cdn.jsdelivr.net/gh/user/repo@version/file

// load jQuery v3.2.1
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.j

// use a version range instead of a specific version
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2/dist/jquery.min.js
https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js

// omit the version completely to get the latest one
// you should NOT use this in production
https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js

// add ".min" to any JS/CSS file to get a minified version
// if one doesn't exist, we'll generate it for you
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js

// add / at the end to get a directory listing
https://cdn.jsdelivr.net/gh/jquery/jquery/

具体步骤

1. 创建github账户，以及在github上创建repository步骤可自行百度
2. 访问repository中文件，可以参照示例进行修改

// https://cdn.jsdelivr.net/gh/github用户名/repository名称@版本号或分支/file文件名
https://cdn.jsdelivr.net/gh/user/repo@version/file

以jQuery的github repository为例，地址为：https://github.com/jquery/jquery

若访问Releases中3.4.1版本，那github中会有这样的文件

// 访问jQuery Releases中3.4.1版本的目录结构
https://cdn.jsdelivr.net/gh/jquery/jquery@3.4.1/
// 访问jQuery最新版本的目录结构（去掉@版本号）
https://cdn.jsdelivr.net/gh/jquery/jquery/

也可以直接访问github repository分支下的文件，在生产环境中不推荐使用。

// 访问jQuery repository分支下的目录结构（main分支）
https://cdn.jsdelivr.net/gh/jquery/jquery@main/
// 访问jQuery repository分支下的目录结构（1.12-stable分支）
https://cdn.jsdelivr.net/gh/jquery/jquery@1.12-stable/

合并多个文件

jsdelivr的组合端点允许您在一个请求中从npm和GitHub端点加载多个文件：

https://cdn.jsdelivr.net/combine/url1,url2,url3

适用于单个文件的所有功能（版本范围，缩小等）也适用于此处。所有组合文件都带有源映射，可以在开发过程中轻松使用。
例如：

https://cdn.jsdelivr.net/combine/gh/jquery/jquery@3.2/dist/jquery.min.js,gh/twbs/bootstrap@3.3/dist/js/bootstrap.min.js
https://cdn.jsdelivr.net/combine/npm/bootstrap@3.3/dist/css/bootstrap.min.css,npm/bootstrap@3.3/dist/css/bootstrap-theme.min.css

jsDelivr+npm 使用方法

// load any project hosted on npm
https://cdn.jsdelivr.net/npm/package@version/file

// load jQuery v3.2.1
https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js

// use a version range instead of a specific version
https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js
https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js

// omit the version completely to get the latest one
// you should NOT use this in production
https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js

// add ".min" to any JS/CSS file to get a minified version
// if one doesn't exist, we'll generate it for you
https://cdn.jsdelivr.net/npm/jquery@3.2.1/src/core.min.js

// omit the file path to get the default fil
https://cdn.jsdelivr.net/npm/jquery@3.2

// add / at the end to get a directory listing
https://cdn.jsdelivr.net/npm/jquery/

jsDelivr+WordPress 使用方法

// load any plugin from the WordPress.org plugins SVN repo
https://cdn.jsdelivr.net/wp/plugins/project/tags/version/file

// load an exact version
https://cdn.jsdelivr.net/wp/plugins/wp-slimstat/tags/4.6.5/wp-slimstat.js

// load the latest version
// you should NOT use this in production
https://cdn.jsdelivr.net/wp/plugins/wp-slimstat/trunk/wp-slimstat.js

// load any theme from the WordPress.org themes SVN repo
https://cdn.jsdelivr.net/wp/themes/project/version/file

// load an exact version
https://cdn.jsdelivr.net/wp/themes/twenty-eightteen/1.7/assets/js/html5.js