摘要：文章圖片存儲(chǔ)在，網(wǎng)速不佳的朋友，請(qǐng)看使用心得加速雙刃劍或者來(lái)我的技術(shù)小站本文以騰訊云平臺(tái)的服務(wù)為例，記錄下在個(gè)人網(wǎng)站開發(fā)和公司項(xiàng)目實(shí)戰(zhàn)中的對(duì)使用的心得便宜沒好貨。此時(shí)，更應(yīng)該使用來(lái)提速。

文章圖片存儲(chǔ)在GitHub，網(wǎng)速不佳的朋友，請(qǐng)看《CDN 使用心得：加速雙刃劍》 或者 來(lái)我的技術(shù)小站 godbmw.com

本文以騰訊云平臺(tái)的 CDN 服務(wù)為例，記錄下在個(gè)人網(wǎng)站開發(fā)和公司項(xiàng)目實(shí)戰(zhàn)中的對(duì) CDN 使用的心得：便宜沒好貨。

CDN 的全稱是 Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡(luò)。其目的是通過(guò)在現(xiàn)有的 Internet 中增加一層新的網(wǎng)絡(luò)架構(gòu)，將網(wǎng)站的內(nèi)容發(fā)布到最接近用戶的網(wǎng)絡(luò)“邊緣”，使用戶可以就近取得所需的內(nèi)容，提高用戶訪問(wèn)網(wǎng)站的響應(yīng)速度。

可以簡(jiǎn)單理解成：CDN 就是一個(gè)能讓用戶以最快速度訪問(wèn)到相應(yīng)資源的網(wǎng)盤。

在云平臺(tái)的控制臺(tái)開啟“對(duì)象存儲(chǔ)”服務(wù)后，開啟對(duì)應(yīng)的“加速域名”，此時(shí)，針對(duì)這個(gè)存儲(chǔ)桶，就開啟了 CDN 加速。

如下圖所示，“加速域名”就是 CDN 域名。

在存儲(chǔ)桶下可以進(jìn)行各種文件操作，比如我將友鏈的圖片都放在了/friend文件夾下面：

此時(shí)，birdteam.png的 URL 是：https://blog-1255463368.cos.ap-guangzhou.myqcloud.com/friend/birdteam.png；CDN 對(duì)應(yīng)的 URL：https://blog-1255463368.file.myqcloud.com/friend/birdteam.png。任何資源都可以用文件路徑拼接的方式來(lái)獲得 URL，進(jìn)而獲得資源。

時(shí)下火熱的vuejs,reactjs等 SPA 框架以及衍生出來(lái)的腳手架，均有利用webpack進(jìn)行打包操作。最無(wú)腦的操作就是將打包后的文件直接扔到服務(wù)器上。

然后，用戶訪問(wèn)網(wǎng)站的時(shí)候，從服務(wù)器拉取資源，速度慢到另人發(fā)指。除此之外，還得考慮做后端緩存，更是出力不討好:)

但是，借助 CDN 可以極大縮小用戶等待時(shí)間，提高訪問(wèn)體驗(yàn)。同時(shí)，云平臺(tái) CDN 還自帶前端緩存，簡(jiǎn)單方便。

在vue-cli搭建的vuejs應(yīng)用中，可以通過(guò)修改/config/index.js中的配置來(lái)更改打包后index.html文件中資源的地址。如下圖所示，更改build.assetsSubDirectory為存儲(chǔ)桶的文件名稱，更改 build.assetsPublicPath為 CDN 的域名：

命令行執(zhí)行npm run build后，打包后的項(xiàng)目文件都放在了/dist/文件下。根據(jù)前面的配置，將/dist/static/文件夾直接上傳到云平臺(tái)的對(duì)應(yīng)存儲(chǔ)桶的跟目錄下即可。

查看網(wǎng)站godbmw.com的源碼，可以看到資源都是從 CDN 上獲取了。

在搭建博客之初，因?yàn)橄牍?jié)省一些 CDN 資源，所以，一些第三方 JS 庫(kù)并沒有利用npm來(lái)進(jìn)行管理，而是通過(guò)第三方 CDN 來(lái)引入的。比如博客下方的播放組件Aplayer，評(píng)論系統(tǒng)Valine等等。

這樣做的好處就是打包體積小了很多（從800+kb降低到了500+kb）。本來(lái)以為可以提高用戶訪問(wèn)速度，但事實(shí)是：免費(fèi)的 CDN 是不穩(wěn)定的。ValineCDN 資源的獲取，有時(shí)候會(huì)阻塞 3s，在網(wǎng)絡(luò)不穩(wěn)定的移動(dòng)端，瀏覽體驗(yàn)非常差。

除了速度不穩(wěn)定，不通過(guò)npm管理的項(xiàng)目難以維護(hù)。隔了 2 個(gè)月，就忘記用了什么庫(kù)，只能通過(guò)翻代碼和查看