CDN使用心得 加速雙刃劍

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

cdn 的全稱是 content delivery network，即內容分發網路。其目的是通過在現有的 internet 中增加一層新的網路架構，將**的內容發布到最接近使用者的網路「邊緣」，使使用者可以就近取得所需的內容，提高使用者訪問**的響應速度。

如下圖所示，「加速網域名稱」就是 cdn 網域名稱。

此時，birdteam.png的 url 是：；cdn 對應的 url：。任何資源都可以用檔案路徑拼接的方式來獲得 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 上獲取了。

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

除了速度不穩定，不通過npm管理的專案難以維護。隔了 2 個月，就忘記用了什麼庫，只能通過翻**和檢視標籤中 cdn 的資源位址來確定。

因此，盡量在專案中使用npm安裝第三方庫，而不是通過第三方平台的 cdn 服務載入對應的庫**。

cdn 的理解和應用都非常簡單，沒什麼深度，只是經驗之談（所以文章結構有點散，請諒解）。

目前，各大平台的 cdn 免費額度對於個人專案甚至是小型商業專案是夠用的。例如我的部落格打包後才800+kb，而免費額度是10g/月，如果能用光免費額度，那麼也說明**可以盈利了。此時，更應該使用 cdn 來提速。這是乙個良性迴圈。

完

CDN使用心得 加速雙刃劍

文章儲存在github，網速不佳的朋友，請看 cdn 使用心得 加速雙刃劍 或者 來我的技術小站 godbmw.com cdn 的全稱是 content delivery network，即內容分發網路。其目的是通過在現有的 internet 中增加一層新的網路架構，將 的內容發布到最接近使用者的網...

Github Pages 使用國內 CDN 加速

本文以阿里雲cdn github pages coding pages為例 假設你已經建好了繫結了網域名稱的 github pages coding pages 若沒有，則參考該鏈結，請忽略後面新增 cloudflare cdn 的內容 開通阿里雲 cdn 服務，計費方式自己選擇 阿里雲cdn 網域...

frameset 使用心得

欲明白本篇 html徹底剖析 之標記分類，請看 標記一覽 也請先明白圍堵標記與空標記的分別，請看 html概念 框架概念 謂框架便是網頁畫面分成幾個框窗，同時取得多個 url。只需要 即可，面所有框架標記需要放在乙個總起的 html 檔，這個檔案只記錄了該框架如何分割 不會顯示任何資料，所以不必放入...