在設計網站或部落格時經常使用一些外部的 JavaScript 程式庫,例如最常看到的 jQuery、AngularJS 或 CSS 框架,但 JavaScript 程式通常伴隨著拖延網站載入速度的問題,因此才會有所謂的「免費開放式 CDNs 服務」用以改善網站效能,這些服務多由世界級企業提供,例如:Google、Microsoft 和百度、新浪網等等,只要以 CDN 提供的網址來存取 JavaScript 程式就有減少主機流量、加速網站載入等效果,現階段來說非常建議使用。
不過開放式 CDN 服務也不是完全沒有缺點,其中一個最大問題是:中國大陸網路封鎖不少開放式服務,網站如果使用 Google 的 ajax.googleapis.com 反而可能造成中國網友載入速度變慢,無法達到兩全其美實在有點可惜。
假如你希望讓上網速度變得更快,本文要推薦一款 Google Chrome 瀏覽器外掛「Local CDN」能改善這類問題,Local CDN 會辨識已知的開放式程式庫,將 JavaScript 下載、快取在本機磁碟,以後再開啟相同程式時就不用重新下載,不僅能節省網路流量,更大的幫助是加速網站載入速度!
目前 Local CDN 支援的網址(Hostnames)如下:
- ajax.googleapis.com
- ajax.aspnetcdn.com
- ajax.microsoft.com
- cdnjs.cloudflare.com
- code.jquery.com
- cdn.jsdelivr.net
- yastatic.net
- yandex.st
- libs.baidu.com
- lib.sinaapp.com
- upcdn.b0.upaiyun.com
比較特別的是支援三個中國大陸的 CDN 服務,包括百度、新浪及又拍雲。不過 Local CDN 也不是什麼都會快取,僅支援以下這些程式大部分版本:
angular、backbone、dojo、ember、extCore、jQuery、jQueryUI、modernizr、mootools、prototypeJS、scriptaculous、swfobject、underscore 和 webfont。
擴充功能資訊
元件名稱:Local CDN
適用平台:Chrome
程式語系:英文
官方網站:https://add0n.com/local-cdn.html
安裝頁面:從 Chrome 線上應用程式商店下載
使用教學
STEP 1
在 Google Chrome 應用程式商店下載、安裝 Local CDN 擴充功能後,瀏覽器右上角會多一個新的圖示,安裝後就會在需要時自動執行,無須額外設定。
STEP 2
當你在瀏覽的網頁內有 Local CDN 支援的元件時,它就會在圖示右下角顯示已經快取暫存的元件數量,將游標移動到上面可以看到儲存在你本機電腦上的 JavaScript 元件。
STEP 3
打開 Google Chrome 開發者工具,也能看到元件載入情形。例如下圖的 Webfont.js 已經由 Google CDN 快取到你的電腦,未來在開啟含有相同元素的頁面時就會自動從你的本機電腦裡讀取這個檔案,載入速度一定比任何的開放式 CDNs 來得更快。
Local CDN 也是一項開放原始碼專案,有興趣的話可以從 GitHub 找到更多說明。