jsDelivr
オープンソース向け CDN jsDelivr についてまとめています。
ここでは特に使われる用途があると思われる
GitHub および npm のプロジェクトで CDN を使用する方法について記載しています。
目次
公式サイト
GitHub で jsDelivr CDN を使用する
トップページで GitHub を選択すると使用例が表示されますが、
それだけで試してもうまくいかない場合があります。
https://cdn.jsdelivr.net/gh/ユーザー/レポジトリ@バージョン/ファイル
ここでのポイントは バージョン です。次を指定できます。
タグ
コミットの時にタグを付ける事ができます。
また、GitHub ではプロジェクトの releases を作成する時にもタグを付ける事ができます。
この タグ を指定します。
🎈 tags | GitHub fu-sen/strapdown.js
ここには タグ 20220831 があります。
🎈 https://github.com/fu-sen/strapdown.js/releases/tag/20220831
次で参照できます。ここでは 5/strapdown.js を指定しました。
🎈 https://cdn.jsdelivr.net/gh/fu-sen/strapdown.js@20220831/5/strapdown.js
コミット
コミットした時に commit の後に生成されている 16 進数の英数です。
🎈 commits | GitHub fu-sen/strapdown.js
ここには次のコミットがあります。差分表示のところです。
🎈 https://github.com/fu-sen/strapdown.js/commit/ef99ba1a09228a1442c3c0e948f6ea7644ed368f
この ef99ba1a09228a1442c3c0e948f6ea7644ed368f を含めます。
🎈 https://cdn.jsdelivr.net/gh/fu-sen/strapdown.js@ef99ba1a09228a1442c3c0e948f6ea7644ed368f/5/strapdown.js
ブランチ
現在 GitHub でプロジェクトを作成すると、デフォルトは main ブランチです。
2020年9月以前は master ブランチでした。
🎈 fu-sen/strapdown.js | GitHub
このブランチ名を含めて参照できます。その時点のブランチ最新となります。
🎈 https://cdn.jsdelivr.net/gh/fu-sen/strapdown.js@main/5/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 の場合に省略できます。
現在 GitHub の新規プロジェクトでは 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@20220831/5/strapdown.js
次のようにして、空白・改行を除去した状態でダウンロードできます。
🎈 https://cdn.jsdelivr.net/gh/fu-sen/strapdown.js@20220831/5/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 サーバはどこにありますか？ 日本からでも効果がありますか？
jsDelivr は Cloudflare、Fastly、Bunny および Quantil を
CDN サーバとして採用しています。
日本の場合、Cloudflare と Flastly が東京・大阪、Bunny が東京にサーバを置きます。
なので、日本からでも CDN の効果を実感できるでしょう。
試しに参照してみましたが、遅い気がしますが……
はじめて参照する時は GitHub や npm からファイルを取得します。
2 回目以降同じ URL で参照すると、すぐに表示されるようになります。
この時 jsDelivr では蓄えたファイルを近くにある CDN サーバから出力します。
これによって高速化を実現するのが CDN の仕組みです。
参照数が多くなってくると CDN の効果がでてきます。
新しいファイルに更新しましたが、jsDelivr で変化しません。
あえて GitHub の main または master ブランチを使用し、
最新状態を反映させる目的で使用する場合に発生します。
jsDelivr では通常一度取得したファイルは最大 7 日後に再度取得します。
従って短時間で変更を行ったファイルは時間を置いて反映されます。
Purge jsDelivr CDN cache | jsDelivr
現在は Web サイト上からキャッシュを削除し、内容を更新できるようになっています。
キャッシュを削除したい該当の URL を入れて下さい。
