Recent Entries

スポンサーサイト

[スポンサード リンク]


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

YUI Compressor OnlineでJavaScriptファイルを軽くする

[スポンサード リンク]


Webページを便利にしたりカッコ良くしたりするのに不可欠なJavaScriptですが、あまりに大きなJavaScriptファイルを読み込ませると、Webページの表示や操作が遅くなってしまします。
でもでも、やっぱり欠かせないーという方も多いはず。

ユーザー側から見れば必要のない無駄なものでも、管理者からみると可愛くって仕方がない機能ってありますよね。たとえそれが原因でWebページ自体が重くなっても・・・。

うちのブログで言えば、slimbox.jsによる画像の演出でしょうか。
Slimbox 1.64で画像表示を素敵に演出!
これは完全に自己満足の世界のような気がします( ´∀`)

でも、ユーザーの事を考えれば出来るだけ軽快なWebページの方が良いに決まってます。
つまりJavaScriptファイルの読み込み時間を出来るだけ短縮できれば良いのです。

JavaScriptファイルやCSSファイルを圧縮して高速化する「YUI Compressor Online」 - GIGAZINE

GIGAZINEさんで紹介されてる「YUI Compressor Online」がいい感じです!

Yahoo!の社員であるJulien Lecomte氏が開発した「YUI Compressor」という有名なJavaScriptファイルとCSSファイルの圧縮を行うJAVAで作られたツールがあるのですが、それをもっと簡単に利用できるようにオンラインで提供する強者が現れました。

YUI Compressorの存在は知ってましたが、面倒なので試してませんでした。
でも、オンラインでチャッチャと出来てしまうならやってみたーい!というわけで試してみたというわけです。

ちなみにYUI(The Yahoo! User Interface Library)は米yahoo!が開発したユーザーインタフェースの機能を多く持つAjaxライブラリです。AjaxライブラリってのはすごーいJavaScriptプログラムの集合です。

うちのブログのヘッダーで読み込んでいるJavaScriptファイルは3つです。

  1. slimbox.js [4.19Kbyte] (画像演出)
  2. mootools.js [45.0KByte] (slimboxで使用)
  3. new.js [184byte] (最新記事に新着マークをつける

大した容量じゃありませんのであまり効果ないと思いますが、今回はYUI Compressor Onlineのお試しなので少しでも軽くなればOKということで!

YUI Compressor Onlineの使い方

  1. 上記サイトに行き、Javascript fileのところの[参照]ボタンでスクリプトファイルを選択し、[compress]ボタンを押します。
  2. すると、「Download generated file」というリンクが表示されるのでクリックします。
  3. JavaScriptのコードが表示されましたね。
    あとはページのソースを開いて、「ファイル」-「名前を付けてページを保存」で任意の場所に保存しましょう。
    出力されたファイルの名前は、元の名前に-minが付きます。

compression ratioは圧縮率ですので数字が大きい方がファイルがより小さくなったという事です。

実際に3つのファイルやってみた結果はこちら。

  • slimbox.js [4.19Kbyte → 3.95Kbyte]
  • mootools.js [45.0KByte → 45.0KByte]
  • new.js [184byte→ 157byte]

mootools.js以外は小さくなってます。
mootools.jsが小さくならなかったのは、元から圧縮済みだったということでしょう。
(Minify only, do not obfuscate(難読化)をすると少し軽くなりましたよ。)

ファイルの中身が気になったのでテキストエディタでのぞいて見ました。
(new-min.jsの中身)

var today=new Date();function nw(E,D,C,B) {var A=24; var F=new Date(E,D-1,C,B);if (today-F<3600000*A*2) {document.write('<span class="new">New</span>')}};

元のJavaScriptファイル(new.js)はこれです↓

var today=new Date(); 
function nw(u1,u2,u3,u4) { 
var nt=24; var c=new Date(u1,u2-1,u3,u4); 
if (today-c<3600000*nt*2) { 
document.write('<span class="new">New</span>')} 
} 

JavaScriptファイルの圧縮前と圧縮後の違い

  1. 改行が無くなる
  2. コメントが無くなる
  3. 変数名が置き換わる

ほぇ~これだけでも結構軽くなるんですね。
YUI Compressorは無駄なものを極力無くす作業をやってくれていると言う事かな。
凄く見づらくなるから、元ファイルもバックアップしておいた方がよいですね。

あと、コメント消えちゃまずいものもありますよね。
slimbox.jsもMIT-style licenseですけど、コメント部分が無くなるとダメな気が・・。
実行する際には気を付けなければいけませんね。

slimbox-min.jsにコメント部分だけ戻すと[4,09KByte]ですから、これでも少し軽くなるのでOKだと思います。

YUI Compressor Onlineを通じて、これからスクリプトを書く時に少し気をつければちょっとは軽くなる事がわかりました。
ちょっくら調べたら、凄く参考になる記事があったので貼っときます。

第30回 JavaScriptの動作を軽くするための工夫:ITpro

いやーJavaScriptって楽しいけど、すぐ重たくなっちゃうからこういうのあると便利ですね。
JavaScript使い過ぎでやたら重たいWebページのオーナーさんはぜひお試しあれ。

Comments

Comment Form