背景
我們?cè)诓渴饌€(gè)人網(wǎng)站的時(shí)候,必然會(huì)面對(duì)以下幾個(gè)問(wèn)題。
為了讓網(wǎng)站美觀,我們需要加載一些的css和js文件,并且還可能會(huì)用一些體積較大的背景圖,動(dòng)圖或者是一些視頻;
在網(wǎng)站上發(fā)布文章的時(shí)候,基本上每篇文章都會(huì)插很多圖片,尤其是技術(shù)類(lèi)的文章,操作流程,實(shí)現(xiàn)效果都必不可少,而且圖片量會(huì)很大。(需要CDN代運(yùn)維可以找尊云網(wǎng)絡(luò))
然而這些東西,尤其是圖片和視頻,在 Web 服務(wù)器上不光占用大量帶寬,有的時(shí)候帶寬不夠的時(shí)候,或者同時(shí)訪問(wèn)的人數(shù)非常多時(shí)候會(huì)加載不出來(lái),會(huì)非常卡,特別影響用戶(hù)體驗(yàn)。所以為了解決這個(gè)問(wèn)題,最簡(jiǎn)單的辦法就是購(gòu)買(mǎi) CDN加速服務(wù),把靜態(tài)資源通過(guò) CDN 加速來(lái)提高訪問(wèn)速度,降低帶寬負(fù)載,然而這個(gè)要花錢(qián),用免費(fèi)的呢又不太放心。
那么,有沒(méi)有一個(gè)既免費(fèi)又靠得住的方案呢?今天給大家推薦一個(gè)新的解決方案:Github + jsDelivr。
Github和jsDelivr
在介紹用處之前,先來(lái)介紹一下這兩個(gè)平臺(tái)。
Github
Github 是最受歡迎的、免費(fèi)的、開(kāi)源項(xiàng)目托管平臺(tái),對(duì)我們來(lái)說(shuō)最大的優(yōu)點(diǎn)就是代碼倉(cāng)庫(kù)的創(chuàng)建數(shù)量不受限制,但是有容量的限制,第一倉(cāng)庫(kù)容量不能超過(guò)1G,第二上傳文件大小不能超過(guò)100M,并且超過(guò)50M時(shí),就會(huì)給出警告。
但是這些限制對(duì)我們來(lái)說(shuō)幾乎沒(méi)有什么影響,因?yàn)槲覀冎饕褪莵?lái)存儲(chǔ)css和js文件和一些圖片等,基本不會(huì)超過(guò)100M。
我們一個(gè)網(wǎng)站中用到的CSS和JS文件基本都不大,而圖片雖然多一些,但除了背景圖稍微大一點(diǎn),大致幾百K之外,其它大部分都是一些小插圖,通常一個(gè)圖片不會(huì)超過(guò)100K,往一個(gè)倉(cāng)庫(kù)里存?zhèn)€一兩萬(wàn)張是沒(méi)問(wèn)題的,更何況,如果不夠的話,還可以建更多倉(cāng)庫(kù),畢竟Github不限制倉(cāng)庫(kù)數(shù)量。
jsDeliver
jsDelivr 是一個(gè)免費(fèi)的開(kāi)源 CDN平臺(tái),緊密集成了 Github 和 NPM,能自動(dòng)為幾乎所有開(kāi)源項(xiàng)目提供可靠的 CDN 服務(wù),且沒(méi)有帶寬限制,完全免費(fèi)。
jsDelivr 在國(guó)內(nèi)外290+的區(qū)域都有 高速CDN節(jié)點(diǎn),訪問(wèn)速度非???,可以保證在任何地方都延遲都很低。
最重要的是,jsDelivr 體量大,知名度高,它的可靠性沒(méi)問(wèn)題,而且不會(huì)突然打臉自己,不會(huì)說(shuō)突然從某天開(kāi)始收費(fèi)。
使用方法
第一步,我們需要在 Github 上創(chuàng)建一個(gè)公開(kāi)的倉(cāng)庫(kù)用來(lái)存放靜態(tài)資源。
第二步,我們需要上傳靜態(tài)資源,可以通過(guò)瀏覽器直接上傳,也可以借助客戶(hù)端(如git等)工具把需要托管的靜態(tài)資源提交到倉(cāng)庫(kù)中即可。
第三步,使用 jsDelivr 加速
加速方法很簡(jiǎn)單,我們只需通過(guò)
https://cdn.jsdelivr.net/gh/用戶(hù)名/倉(cāng)庫(kù)名/文件路徑 來(lái)引用資源文件即可
更新資源
CDN 本質(zhì)上就是一個(gè)緩存系統(tǒng),把我們倉(cāng)庫(kù)的文件暫時(shí)緩存再cdn服務(wù)器上,所以,當(dāng)我們更新資源文件后,就必須要刷新緩存,才能讓新文件生效。而且jsDelivr的緩存會(huì)在一段時(shí)間之后自動(dòng)失效,但如果你想要立即使用新的資源,就需要手動(dòng)更新緩存。
操作步驟很簡(jiǎn)單,只需要將上面的https://cdn.jsdelivr.net/替換成
https://purge.jsdelivr.net/,然后通過(guò)瀏覽器訪問(wèn)一下就可以了。