jQueryライブラリなどの CDN 指定方法

JavaScript

CDN 利用の利点

−jQuery などのライブラリ読み込みは、スケールされたサーバの CDN を利用することで高速化が期待できる。
−多数のページが URL の CDN を指定することでキャッシュの有効活用が期待できる。
−開発時にはお手軽。


商用でも多数の CDN サービスがありますが、よく使う Google と MS のホスティングサービス。

Google Hosted Libraries

Google でホストされている CDN(Contents Delivery Network)
https://developers.google.com/speed/libraries/


現在は以下が利用できる。

リンクを辿って script をコピーすればよい。


scriptsrc.net は COPY ボタンを押すとクリップボードにコピーされるのでより簡単。
http://scriptsrc.net/


以下のようなコードがコピーされるので、HTML に貼付ければよい。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


ライブラリのバーションは以下のように指定でき、例えば 1.7 と指定すると、1.7 系の最新バージョンを取得できる。

<script ・・・"/jquery/1.7.2/jquery.min.js">
<script ・・・"/jquery/1.7/jquery.min.js">
<script ・・・"/jquery/1/jquery.min.js">

1.7.2 のようにマイナーバージョンまで指定した場合は、キャッシュは1年後に Expire する指定となるが、1 や 1.7 のように指定した場合は 24時間の有効期限となる。
すなわち、本番環境ではマイナーバージョンまで含めて指定すべし。


Microsoft Ajax CDN

Microsoft がホストしている CDN で、Third-Party Files on the CDN として提供されている。
http://www.asp.net/ajaxlibrary/CDN.ashx


現在は以下が利用できる。


こちらはバージョンをそのまま指定。

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>

CDN から読み込めない場合は

サービスレベルが規定された商用サービスではないので、CDN から読めない場合を考慮して、

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/vendor/jquery-1.8.2.min.js"><\/script>')</script>

本番環境では上記のように、読み込めない場合は自前のサーバから読み込むようにしておく必要がある。