不管是網站的開發人員或部落格的站長,肯定多少都聽過 CDN 這個產品,CDN 的全名叫做 Content Delivery Network,意思是指大型的內容分發網路,主要由分佈在世界各地的檔案伺服器所構成,可以減少網站負荷並加速檔案的讀取與傳輸速度。
世界上不少的知名網站都有透過 CDN 服務來加速網站,而使用 CDN 有相當多的好處,例如可以減少原網站的負載、提升網站的 SEO、降低流量的開銷…等,雖然不少的 CDN 服務都需要付費才,但站長今天要介紹的 cdnjs 卻是一個免費的 CDN 服務,能夠讓使用者引用像 React、Vue.js、Bootstrap、jQuery…等知名的開源項目資源。
cdnjs 是一個免費的 CDN 內容傳遞網路服務,網站上提供許多 JavaScript、CSS 開源項目的函式庫能夠使用,同時 cdnjs 網站服務是由知名的 Cloudflare CDN 提供,不管在穩定性或速度方面都十分出色,如果您的網站引用了大量不同的 JavaScript 函式庫,那麼可以考慮使用 cdnjs 的 CDN 來幫助節省傳輸流量並提升網站載入速度。
網站連結:https://cdnjs.com/
cdnjs 使用教學
STEP 1
開啟 cdnjs 網站後,使用者可以直接使用網頁中間的搜尋欄位來搜尋想要引用 CDN 的 JavaScript 腳本或 CSS 樣式,目前 cdnjs 網站上有超過 4000 多種的資源能夠引用。

STEP 2
如果點擊網站導覽列上的 Libraries 選項,使用者則可以瀏覽目前託管在 cdnjs 免費 CDN 上的所有資源,其中也包含許多目前知名的開源項目,例如:React、Vue.js、Bootstrap、Font Awesome、jQuery…等,都能夠免費從 cdnjs 的 CDN 上引用。

STEP 3
當然開發人員也能夠直接使用 cdnjs 所提供的 API 來開發專案,只要點擊網站導覽列上的 API 選項就可以開啟完整的 API 使用說明文件。

STEP 4
這邊站長以 jQuery 函式庫為例,當在 cdnjs 上開啟 jQuery 的頁面後,使用者可以在網頁的上方看到關於這個開源項目的名稱、網站連結、授權條款…等相關說明。

STEP 5
再來底下的 Version 選項可以讓使用者選擇想要引用的資源版本號,旁邊的 Asset Type 選項則能夠選擇想要引用的資源檔案類型。

STEP 6
最後使用者只要複製想要引用的資源連結網址,並貼到自己的網站上取代掉原本的資源連結網址,這樣就能夠從 cdnjs 的 CDN 上直接引用該資源了!
以本站為例,就需要把目前使用的 jQuery 連結替換成下方 cdnjs 提供的 CDN 連結。
https://techxg.com/wp-includes/js/jquery/jquery.min.js?ver=3.6.1
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js
