免費CDN加速服務 jsDelivr 支持npm，GitHub，WordPress

• CDN介紹
• 免費CDN - jsDelivr
• • jsDelivr+GitHub 使用方法
  • • 合并多個文件
  • jsDelivr+npm 使用方法
  • jsDelivr+WordPress 使用方法

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/

具體步驟

創建github賬戶，以及在github上創建repository步驟可自行百度

訪問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

總結

以上是生活随笔為你收集整理的免费CDN加速服务 jsDelivr 支持npm，GitHub，WordPress的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。