JS 免費外連服務推薦+提供 CDN 加速﹍jsDelivr + Githack

本站發布了大量的「Blogger 小工具」，其中程式碼比較多的，需要將部份 JS 打包並外連以節省空間。因 JS 外連需要網路空間，原本寫了篇公告「WFU BLOG 外連 JS 操作說明」，建議將外連 JS 放到 Google Drive 或 Dropbox 等，並搭配外連產生器製作 JS 連結。 但可惜的是，近年來這些免費網路空間都中止了公開外連服務。也就是說，若曾使用 Google Drive、Dropbox 的 JS/CSS 外連，現在都會變成死連結了。 為了避免再發生 JS 外連失效的憾事，本篇提供了幾個長遠來看比較有效的作法，也包含了專門提供 JS 外連的服務 jsDelivr 、 Githack，除了比一般免費空間安全一些，令人驚豔的是還有 CDN 加速效果。

一、JS 外連的四種處理方式

1. 程式碼直接塞在網頁上 當初的 Blogger 小工具教學文章，為了不讓程式碼看起來紊亂，通常會把設定參數以外的 JS 程式碼，打包起來作為外連引用，版面空間也比較簡潔。 但如果長遠來看，免費外連空間會是個麻煩的話，那麼不如把 JS 外連的內容，直接塞在程式碼之中，可以一勞永逸。這麼做會增加程式碼管理上的一些不便，但至少不會每隔幾年就要擔心免費空間的問題。 所以本站的 Blogger 小工具教學文章，若曾有 JS 外連的話，我已將九成五以上的外連內容，全部塞回程式碼中了，讀者安裝起來也比較不用折騰。 不過這麼做還是有但書的，我只將 JS 檔大小 10k 左右(含以下)的內容塞回原程式，內容太大的例如「網頁簡繁快速轉換語法」，JS 檔達 64k 塞在教學文章會爆掉的，這麼大的檔案還是外連比較適當。 2. Github Pages 長遠來看，JS 外連最適合的免費空間會是 Github Pages，這是 Github 提供的靜態架站服務，擺放在 Github Pages 的檔案包含 JS 都可外連。 詳細的操作方法可參考「Github 存取網頁 JS/CSS 外連檔案」，但為了避免這個佛心服務被濫用，我這篇文章並未免費開放閱覽，設下一點門檻可延長 Github Pages 的存活期間。 3. jsDelivr 「jsDelivr」是一個免費的開源檔案 CDN，從名稱就可看出是專為 JS 外連服務。由於沒跟任何人收費，經費主要來自於贊助商，例如 Github、Cloudflare...等，其存續將視贊助是否中斷，不過看起來贊助商都很大就是。 只要在 Github、NPM 等開源平台建立了公開專案，那麼放在專案下的檔案，包括 JS 檔，就能使用 jsDelivr 的 CDN 服務建立免費外連，而且頻寬、流量沒有限制，可參考官網說明「About jsDelivr」。 4. Githack 「Githack」這個服務從網址 raw.githack 來解析，是將 Github 檔案的純文字內容 raw 進行 hack 的意思，可以將這個服務視為「RawGit」(已停止維護)的精神繼任者。 Githack 同樣是個免費的開源檔案 CDN，可以將 Github 檔案的 raw 內容進行解析並執行，例如這些類型的檔案 html/js/css。由於 raw 原始內容只能顯示、無法外連，Githack 提供的服務就是讓這些 raw 檔案可以外連。 他跟 jsDelivr 一樣不收費，只接受贊助，但贊助商看起來等級跟 jsDelivr 有差距，所以長遠來看當成備用方案比較適合。

二、jsDelivr 轉換外連的操作

1. 建立 Github 專案及檔案 適用於 jsDelivr 的開源平台中，我們比較熟悉的會是 Github，因此請先在 Github 註冊帳號，接著建立專案(或可稱為儲存庫、repository)並上傳檔案。 這個流程並不困難，可參考這篇教學「Github 如何建立儲存庫」。 2. jsDelivr 操作說明 而 jsDelivr 如何轉換 Github 檔案路徑，根據其官網說明書「GitHub」，連結路徑格式為： /gh/user/repo@version/file 翻成中文大致會是這個意思： https://cdn.jsdelivr.net/gh/Github帳號/Github專案名稱/路徑/檔名.js 以下實際舉個例子比較容易懂。 3. 轉換 Github 檔案外連路徑 參考上圖：

• 上方紅框的「wfublog」是帳號名稱，「js」是專案名稱
• 紅線處可看到在 js 專案下建立了一個目錄「demo」
• 下方紅框可看到 demo 目錄之內的檔案「test.js」

所以這個 js 檔「test.js」的 jsDelivr 外連路徑為： https://cdn.jsdelivr.net/gh/wfublog/js/demo/test.js 4. 自動壓縮 js 檔 jsDelivr 還提供一個超實用功能，可以自動幫我們壓縮 js 檔，只要做些修改即可。 例如原本檔名為「test.js」，只要改成「test.min.js」就是壓縮檔了，那麼前面的外連路徑改成以下，就會自動產生 js 壓縮檔外連： https://cdn.jsdelivr.net/gh/wfublog/js/demo/test.min.js

三、Githack 轉換外連的操作

1. 建立 Github 專案及檔案 適用於 Githack 的開源平台比 jsDelivr 多很多，共有這些：

• GitHub
• Gist
• Bitbucket
• GitLab
• Gitea
• Codeberg

不過最知名的仍是 Github，因此接下來同樣以 Github 專案及檔案進行舉例。 2. 取得 Github 檔案 raw 連結 但 Githack 產生外連的邏輯跟 jsDelivr 不太一樣，必須先取得 Github 檔案的原始內容頁面(raw)連結，以下同樣以前面 WFU BLOG 專案中的「test.js」舉例： 如上圖是進入「test.js」這個檔的頁面，有兩個方式取得 raw 連結：

• 對著紅框 Raw 按鈕按右鍵複製網址
• 點擊 Raw 按鈕會進入 raw 頁面，複製該頁面網址

這兩種連結都能在 Githack 轉換成 js 外連。 3. 轉換 Github 檔案外連路徑 進入「Githack」官網後如上圖：

• 紅色底線處請貼上 Github 檔案的 Raw 連結
• 左邊紅框會自動產生「CDN 連結網址」，這便是我們需要的 js 外連網址，適合長期使用
• 右邊也會自動產生一個「測試用連結網址」，只適合短期使用

4. CDN 網址與測試網址差別 為了避免混淆，簡單說明這兩個連結的差別。 測試網址：

• 通常是工程師使用，程式還沒開發完畢前會不斷修改，所以測試網址可以用來測試 js 檔效果
• 測試網址快取時間很短，內容有變更很快會看到效果
• 測試網址只允許低流量，若流量太高時會自動轉到 CDN 網址，導致看不到測試效果變動

CDN 網址：

• 適合 js 檔內容長期不變動使用，有 CDN 加速效果
• 網址快取時間很長，至少一年
• 允許高流量

更多「網路免費空間」相關文章：