免費 CDN 玩法 —— 文件一鍵上傳到 NPM


前言

unpkg、jsdelivr 等站點可加速 NPM 包文件,適合作為個人網站或演示案例的免費 CDN。

雖然上傳文件到 NPM 很簡單,創建 package.json 然后 npm publish 即可,但之后更新卻很麻煩 —— 即使只更新一個文件,也要發一個新版本的包。由於 URL 包含版本號,因此所有文件的 URL 都會變化,導致無法利用緩存。

當然也可以增量發布,每次只發布變化的文件,從而充分利用已有的文件。但這需記錄每個文件的狀態,實現起來較為麻煩。

無狀態

這里講解一種更巧妙的方案 —— 使用文件 Hash 作為版本號。

雖然版本號必須是 1.0.0 這種格式,但 semver 規范允許設置 pre-release 后綴,例如 1.0.0-alpha

因此可以將文件 Hash 作為后綴,並且每個包只有一個文件。文件名固定,例如都使用 index,擴展名保留原始值。例如:

https://unpkg.com/free-host@0.0.0-C0LZDygPhSzaVUKy/index.css

這樣就不用單獨維護每個文件的版本了,所有文件都是 0.0.0 版本!

演示

根據上述思路,編寫相應的腳本 npm-upload.sh

使用前登錄 NPM。通過 NPM_PKG 環境變量指定包名:

export NPM_PKG=package_name

例如上傳 hello.txt

echo "Hello World" > hello.txt

~/npm-upload.sh hello.txt

得到結果:

https://unpkg.com/free-host@0.0.0-0qhPS4tlCTfsj3PN/index.txt

https://cdn.jsdelivr.net/npm/free-host@0.0.0-0qhPS4tlCTfsj3PN/index.txt

可同時上傳多個文件。例如上傳當前目錄下所有文件:

~/npm-upload.sh $(find * -type f)

得益於 Hash 的優勢,上傳前腳本可檢查該文件是否存在,所以內容相同的文件不會重復上傳。

應用

如何將網站所有 URL 都映射到 unpkg 或 jsdelivr?一個簡單的辦法是用 <base> 重置根路徑。但這只適用於相對路徑,並且一次只能選擇一個 CDN。

有沒有辦法自動選擇最快的那個 CDN,並且出現問題后無縫切換到另一個?事實上可通過 Service Worker 實現。案例參考:https://github.com/EtherDream/freecdn/tree/master/examples/free-host


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM