摘要：文章圖片存儲在，網速不佳的朋友，請看使用心得加速雙刃劍或者來我的技術小站本文以騰訊云平臺的服務為例，記錄下在個人網站開發和公司項目實戰中的對使用的心得便宜沒好貨。此時，更應該使用來提速。

文章圖片存儲在GitHub，網速不佳的朋友，請看《CDN 使用心得：加速雙刃劍》 或者 來我的技術小站 godbmw.com

本文以騰訊云平臺的 CDN 服務為例，記錄下在個人網站開發和公司項目實戰中的對 CDN 使用的心得：便宜沒好貨。

CDN 的全稱是 Content Delivery Network，即內容分發網絡。其目的是通過在現有的 Internet 中增加一層新的網絡架構，將網站的內容發布到最接近用戶的網絡“邊緣”，使用戶可以就近取得所需的內容，提高用戶訪問網站的響應速度。

可以簡單理解成：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，進而獲得資源。

時下火熱的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 上獲取了。

在搭建博客之初，因為想節省一些 CDN 資源，所以，一些第三方 JS 庫并沒有利用npm來進行管理，而是通過第三方 CDN 來引入的。比如博客下方的播放組件Aplayer，評論系統Valine等等。

這樣做的好處就是打包體積小了很多（從800+kb降低到了500+kb）。本來以為可以提高用戶訪問速度，但事實是：免費的 CDN 是不穩定的。ValineCDN 資源的獲取，有時候會阻塞 3s，在網絡不穩定的移動端，瀏覽體驗非常差。

除了速度不穩定，不通過npm管理的項目難以維護。隔了 2 個月，就忘記用了什么庫，只能通過翻代碼和查看