1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

GitHub PagesでjsDelivrを使い、無料でjs最小化と、合理的なcache-controlを得よう!

Last updated at Posted at 2025-10-28

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

image.png

利用規約

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を使用するという概念を解説しました。
よい開発ライフを!

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?