jQueryをサーバに設置しない手段

jQueryをサーバに設置しない手段

以前とは違い、1ページで表示する物が非常に多くなった最近のサイトでは、jQueryなどJavaScriptのライブラリも多々使われるようになってきました。
何も意識せずに1処理を1ファイルに書き、たくさんのファイルに分けてくれる人もいますが、自分的にはある程度まとめてファイルを減らしてもらいたいです。

 

1つ1つのファイルサイズが軽くてもファイル数が増えるとサーバの許容量を簡単に越えてしまうことがあります。
おそらくサーバを触ったことが無い人の場合には、「そんなの何とかしろよ!」って感じなのかもしれませんが、出来る範囲と言う物があります。(金銭的にもねー)

そこで利用してもらいたいのが、CDN(Content Delivery Network)と言うコンテンツ配信用のネットワークです。
CDNはネット上にキャッシュサーバを分散配置し、エンドユーザーに最も近い経路にあるキャッシュサーバからコンテンツを、Webサーバに変わり配信してくれる仕組みです。

 

こう言う便利な物はどんどん使って行くべきなので、よく使われるjQueryやjQueryUIなどはCDNで用意されたものを使いましょう!

 

で、CDNってどうやって使うの?と言う声がありそうですが・・・使い方は簡単です。

 

いま、jQueryやjQueryUIを利用するために<head>に記述している内容を書き換えるだけです。

変更前

<script type="text/javascript" src="jquery.min.js"><script>

 

変更後

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

 

これだけで作業は終了です。
今回の例ではGoogleのものを利用しましたが、他にも利用できるところがあります。

Google
https://developers.google.com/speed/libraries/

jQeury CDN
http://code.jquery.com/

Microsoft
http://www.asp.net/ajaxlibrary/CDN.ashx

scriptsrc
http://scriptsrc.net/

 

利点ばかり上げましたが、欠点もあります。

  • ネットが繋がっていない環境では使えない
  • CDN自体がダウンしていることがある

 

上記2点のデメリットを回避するためにjQueryやjQueryUIのファイルを用意しておき下記のような記述を追加すればOKです。

<script>window.jQuery || document.write('<script src="jquery.min.js"><\/script>')</script>

 

今後さらに増えると思われるページサイズを少しでも軽減するための方法として覚えておくと役に立つと思います。

javascriptカテゴリの最新記事