オープンソース向け CDN jsDelivr についてまとめています。

ここでは特に使われる用途があると思われる
GitHub および npm のプロジェクトで CDN を使用する方法について記載しています。


目次


公式サイト


GitHub で jsDelivr CDN を使用する

トップページで GitHub を選択すると使用例が表示されますが、
それだけで試してもうまくいかない場合があります。

https://cdn.jsdelivr.net/gh/ユーザー/レポジトリ@バージョン/ファイル

ここでのポイントは バージョン です。次を指定できます。

リリース

プロジェクトの releases で作成した時、その  タグを指定します。

🎈 releases | GitHub fu-sen/strapdown.js

ここには  タグ 20210301 があります。

🎈 https://github.com/fu-sen/strapdown.js/releases/tag/20210301

次で参照できます。ここでは 4/strapdown.js を指定しました。

🎈 https://cdn.jsdelivr.net/gh/fu-sen/strapdown.js@20210301/4/strapdown.js

コミット

コミットした時に commit の後に生成されている 16 進数の英数です。

🎈 commits | GitHub fu-sen/strapdown.js

ここには次のコミットがあります。

🎈 https://github.com/fu-sen/strapdown.js/commit/eeeac5fac2c872c6639c156b341af9b9774f0655

この eeeac5fac2c872c6639c156b341af9b9774f0655 を含めます。

🎈 https://cdn.jsdelivr.net/gh/fu-sen/strapdown.js@eeeac5fac2c872c6639c156b341af9b9774f0655/4/strapdown.js

ブランチ

現在 GitHub でプロジェクトを作成すると、デフォルトは main ブランチです。
2020年9月以前は master ブランチでした。

🎈 fu-sen/strapdown.js | GitHub

このブランチ名を含めて参照できます。その時点のブランチ最新となります。

🎈 https://cdn.jsdelivr.net/gh/fu-sen/strapdown.js@main/4/strapdown.js

ブランチの直接指定は通常推奨されません。
後のコミットで状態が変わるので、使用している場合に状態が変化してしまうためです。
そのため、リリースかコミットでの使用が推奨されます。

 The default branch for newly-created repositories is now main | The GitHub Blog
 Feature: github link should use default branch, not master branch #18248 | jsdelivr/jsdelivr issues

なお、 @ のない URL での参照も仕様に記載があるのですが、
これはブランチが master の場合に省略できるため、
現在新規で作られたプロジェクトでは main ブランチなので省略できません。
省略するためには master ブランチに変更する必要があります。
これについては issues に報告があります。


npm で jsDelivr CDN を使用する

npm ではリリース毎で明確に公開されるので、GitHub のような混乱はないでしょう。

https://cdn.jsdelivr.net/npm/パッケージ@バージョン/ファイル

@バージョン を省略する事で最新版となります。

https://cdn.jsdelivr.net/npm/パッケージ/ファイル

不要な空白・改行の除去

.js および .css ファイルでは、その前に .min を付加すると、
不要な空白・タブ・改行を削除した状態で出力します。Minify とも言われます。

次の URL は通常の .js ファイルをダウンロードできます。

🎈 https://cdn.jsdelivr.net/gh/fu-sen/strapdown.js@20210301/4/strapdown.js

次のようにして、空白・改行を除去した状態でダウンロードできます。

🎈 https://cdn.jsdelivr.net/gh/fu-sen/strapdown.js@20210301/4/strapdown.min.js


複数ファイルの結合

, 区切りで gh/ または npm/ 以降を複数ファイルを入れると、
これらのファイルを結合した状態でダウンロードできます。
サイズが大きくなる場合、レスポンスに時間を要する場合があります。


Q&A

GitHub Pages でも十分だと思いますが、jsDelivr を使うメリットは?

 GitHub Pages について 使用制限 | GitHub Docs

GitHub Pages にはストレージ容量、帯域幅の制限があります。
世界的に有名なプロジェクトになった場合は
GitHub Pages で維持する事ができなくなる場合がありえます。
その対策として CDN を使用する事になるのですが、
jsDelivr は GitHub プロジェクトを維持しつつ CDN を実現できる一手段となりえます。

使用する時に申請は必要ですか?

必要ありません。
GitHub や npm でプロジェクトが公開されていれば、誰でもすぐに使用できます。

悪用されるような気がするのですが……

特に GitHub はすぐに使用できるので、悪用される恐れが高まりますが、
この対策として .html ファイルは
Content-Type: text/plain で出力されるようになっています。

CDN サーバはどこにありますか? 日本からでも効果がありますか?

 Our network | jsDelivr

jsDelivr は Cloudflare、Fastly、Bunny および Quantil を
CDN サーバとして採用しています。
日本の場合、Cloudflare と Flastly が東京・大阪、Bunny が東京にサーバを置きます。
なので、日本からでも CDN の効果を実感できるでしょう。

試しに参照してみましたが、遅い気がしますが……

はじめて参照する時は GitHub や npm からファイルを取得します。
2 回目以降同じ URL で参照すると、すぐに表示されるようになります。
この時 jsDelivr では蓄えたファイルを近くにある CDN サーバから出力します。
これによって高速化を実現するのが CDN の仕組みです。
参照数が多くなってくると CDN の効果がでてきます。

新しいファイルに更新しましたが、jsDelivr で変化しません。

あえて GitHub の main または master ブランチを使用し、
最新状態を反映させる目的で使用する場合に発生します。

jsDelivr では通常一度取得したファイルは 24 時間後に再度取得します。
従って短時間で変更を行ったファイルは時間を置いて反映されます。
手動で更新したい場合は開発者向けに API ツールが提供されているようです。
また、キャッシュを削除できるよう Web を用意している感触があります。