GitHub Pages より jsDelivr を使うメリット
github Pages(github.io)から直接ファイルを配信すると、どんなに並列化や最適化をしても応答に最低でも約500msかかる場合があります。
Github Pageはcache-controlが10分と、アクセスするたびに変更があるかどうpullする設計であり、最速を目指したいサイトでは不向きです。
実測では同一ファイルの取得でjsDelivrが85ms、github Pagesが210msと、
ほぼ倍の差が出ています。
さらに、jsDelivrはより長いキャッシュ有効期間を返すため、2回目以降のアクセスで大きく有利です。
また、jsDelivrは登録不要・無料で利用でき、タグ(リリース)を付けるだけでバージョン指定の配信が可能です。
オレンジがjsDelivr、灰色がgithub.io
利用規約
Githubからミラーする場合、制限があります。
js以外の配布についてはあまり許容しておらず、特に画像配信cdnとして使用することは禁止しています。
注意点
jsdelivrにキャッシュされたファイルは、永久の保存期間があるs3ストレージに保存され、ユーザー側から削除する方法は存在しません。
例え、リポジトリを削除した場合でも、jsdelivrからは削除できません。
イベントページの場合、使用しないべきです。
使い方(手順)
本番で運用する前に、開発が完了してからタグ付けして公開することを推奨します。
変更をコミットして、GitHubリポジトリにタグを付ける
まず、変更をコミットしてgithubでタグ付けをしてください
このタグは、ソースコード変更するたびに増加します。
git tag 1.0.0
次に、タグをpushします。
git push origin 1.0.0
jsDelivrのURLを作成する
jsDelivrは登録不要で、次の形式でファイルを取得できます。
versionは、タグ付けをしたバージョン文字列です!
または、Githubのタグ内の該当ページから直接変換することもできます。
https://cdn.jsdelivr.net/gh/user/repo@version/file
例:
https://cdn.jsdelivr.net/gh/DQIX/auction@1.1.1/_src/main.js
自動で圧縮されたファイルを使う
URL の末尾を .min.js にすると、jsDelivrが自動で圧縮した結果を返します。
https://cdn.jsdelivr.net/gh/DQIX/auction@1.1.1/_src/main.min.js
これをサイトから使うだけです!
GitHub Pages からファイルを隠す方法
GitHub Pages はデフォルトで_(アンダースコア)で始まるフォルダを公開対象から除外します。
これを利用すれば、ソースファイルをリポジトリ上に置いたまま、github.ioからは除外し jsDelivr経由でのみ、配信できます。
_src/
main.js
lib/
プリロードを使用してより早く
おわりに
開発段階では通常通りgithub pageでテストし、最終版ではjsDelivrを使用するという概念を解説しました。
よい開発ライフを!
