CDN使用心得:加速雙刃劍
文章圖片儲存在 GitHub
,網速不佳的朋友,請看 ofollow,noindex" target="_blank">《CDN 使用心得:加速雙刃劍》 或者 來我的技術小站 godbmw.com
本文以騰訊雲平臺的 CDN 服務為例,記錄下在個人網站開發和公司專案實戰中的對 CDN 使用的心得:便宜沒好貨。
1. 什麼是 CDN?
CDN 的全稱是 Content Delivery Network,即內容分發網路。其目的是通過在現有的 Internet 中增加一層新的網路架構,將網站的內容釋出到最接近使用者的網路“邊緣”,使使用者可以就近取得所需的內容,提高使用者訪問網站的響應速度。
可以簡單理解成:CDN 就是一個能讓使用者以最快速度訪問到相應資源的網盤。
2. 如何訪問 CDN 資源?
在雲平臺的控制檯開啟“物件儲存”服務後,開啟對應的“加速域名”,此時,針對這個儲存桶,就開啟了 CDN 加速。
如下圖所示,“加速域名”就是 CDN 域名。
在儲存桶下可以進行各種檔案操作,比如我將友鏈的圖片都放在了 /friend
資料夾下面:
此時, birdteam.png
的 URL 是: https://blog-1255463368.cos.ap-guangzhou.myqcloud.com/friend/birdteam.png
;CDN 對應的 URL: https://blog-1255463368.file.myqcloud.com/friend/birdteam.png
。 任何資源都可以用檔案路徑拼接的方式來獲得 URL,進而獲得資源 。
3. 如何在 SPA 應用中使用 CDN?
時下火熱的 vuejs
, reactjs
等 SPA 框架以及衍生出來的腳手架,均有利用 webpack
進行打包操作。 最無腦的操作就是將打包後的檔案直接扔到伺服器上。
然後,使用者訪問網站的時候,從伺服器拉取資源,速度慢到另人髮指。除此之外,還得考慮做後端快取,更是出力不討好:)
但是,藉助 CDN 可以極大縮小使用者等待時間,提高訪問體驗。同時,雲平臺 CDN 還自帶前端快取,簡單方便。
在 vue-cli
搭建的 vuejs
應用中,可以通過修改 /config/index.js
中的配置來更改打包後 index.html
檔案中資源的地址。如下圖所示,更改 build.assetsSubDirectory
為儲存桶的檔名稱,更改 build.assetsPublicPath
為 CDN 的域名:
命令列執行 npm run build
後,打包後的專案檔案都放在了 /dist/
檔案下。根據前面的配置,將 /dist/static/
資料夾直接上傳到雲平臺的對應儲存桶的跟目錄下即可。
檢視網站 godbmw.com
的原始碼,可以看到資源都是從 CDN 上獲取了。
4. 不要亂用第三方 CDN
在搭建部落格之初,因為想節省一些 CDN 資源,所以,一些第三方 JS 庫並沒有利用 npm
來進行管理,而是通過第三方 CDN 來引入的。比如部落格下方的播放元件 Aplayer
,評論系統 Valine
等等。
這樣做的好處就是打包體積小了很多(從 800+kb
降低到了 500+kb
)。本來以為可以提高使用者訪問速度, 但事實是:免費的 CDN 是不穩定的。 Valine
CDN 資源的獲取,有時候會阻塞 3s,在網路不穩定的移動端,瀏覽體驗非常差。
除了速度不穩定,不通過 npm
管理的專案難以維護。隔了 2 個月,就忘記用了什麼庫,只能通過翻程式碼和檢視 <script>
標籤中 CDN 的資源地址來確定。
因此,儘量在專案中使用 npm
安裝第三方庫,而不是通過第三方平臺的 CDN 服務載入對應的庫程式碼。
5. 寫在最後
CDN 的理解和應用都非常簡單,沒什麼深度,只是經驗之談(所以文章結構有點散,請諒解)。
目前,各大平臺的 CDN 免費額度對於個人專案甚至是小型商業專案是夠用的。例如我的部落格打包後才 800+kb
,而免費額度是 10G/月
,如果能用光免費額度,那麼也說明網站可以盈利了。此時,更應該使用 CDN 來提速。這是一個良性迴圈。
完