CDN使用心得：加速雙刃劍

文章圖片存儲在GitHub，網速不佳的朋友，請看《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 是不穩定的。ValineCDN 資源的獲取，有時候會阻塞 3s，在網絡不穩定的移動端，瀏覽體驗很是差。

除了速度不穩定，不經過npm管理的項目難以維護。隔了 2 個月，就忘記用了什麼庫，只能經過翻代碼和查看<script>標籤中 CDN 的資源地址來肯定。

所以，儘可能在項目中使用npm安裝第三方庫，而不是經過第三方平臺的 CDN 服務加載對應的庫代碼。

5. 寫在最後

CDN 的理解和應用都很是簡單，沒什麼深度，只是經驗之談（因此文章結構有點散，請諒解）。

目前，各大平臺的 CDN 免費額度對於我的項目甚至是小型商業項目是夠用的。例如個人博客打包後才800+kb，而免費額度是10G/月，若是能用光免費額度，那麼也說明網站能夠盈利了。此時，更應該使用 CDN 來提速。這是一個良性循環。

完