YUI CompressorでjavascriptやCSSを連結・圧縮

GoogleのPage SpeedやYslowの項目の中に「gzipで圧縮してね」みたいなものがある。Java ScriptやCSSをgzipで圧縮することについては前に試して結構圧縮されたんだけど、どうせやるならもっと圧縮してやろう！ってことになりまして、YUI Compressorに手をつけました。YUI Compressorっていうのはヤフーが配布しているJava ScriptやCSSの圧縮用のライブラリです。
圧縮といってもzipにするとかそういうものではなくて、余計な改行なんかを取り除いてくれるツールです。圧縮後はjquery-min.jsの中身みたいに何が何だか分からなくなりますが、動作としては同じように動いてくれます。

このブログでいえば、jquery.js・yuga.js・jquery.corner.jsをほとんどのページで読み込んでいるので、これを1つのファイルにまとめて圧縮してさらにgzipしてみます。そしたらかなり圧縮されちゃいました！

2009/06/12 ライセンスについて追記しました。

元のサイズ

それぞれのファイルサイズと連結後のファイルサイズそれぞれの圧縮後のサイズはこんな感じ。 YUI Compressorで余り小さくならない場合もありますが、コードの書き方によるみたいです。
YUI Compressorで圧縮しやすいコードの書き方については、Life is beautiful: YUI Compressor が圧縮しやすいコードを書くテクニックに関する一考察に詳しく書かれています。
gzipでの圧縮のやり方ついては、「JavaScriptを圧縮して少しでも軽くしてみる」に書きましたので、そちらを参照してください。

	元の状態	YUI Compressorで圧縮	gzip圧縮	YUI Compressorの後gzip圧縮
jquery.js	53.7KB （100%）	53.2KB （99%）	18.6KB (34%）	18.1KB （33%）
yuga.js	9.99KB （100%）	5.36KB （53%）	3.39KB （33%）	1.91KB （19%）
jquery.corner.js	14.0KB （100%）	6.75KB （48%）	4.18KB （29%）	2.51KB （17%）
連結ファイル	77.8KB （100%）	65.3KB （83%）	25.8KB （33%）	21.9KB （28%）

計算が間違っていなければ、1つにまとめたものの方が小さくなりました。動作的には変わらないはずなので、まとめてしまった方が良いのかも。（HTTPリクエストの数も減るし）

コメントでライセンス表記がなくなっているとの指摘があったので、みたら完全に無くなっていました。
MITライセンスなので、改変・結合は問題ないと思いますが（MITライセンスってこれであってますか？）圧縮後はライセンスの表記をコピペしてつけておいてください。
（圧縮したものにそれぞれのライセンス表記をつけるというやり方で正しいのかどうかわからないので、調べてみます。）

Twitterでこの記事に対するライセンスに関する指摘を受け（見つけ）、すぐに修正しました。
著作権表記を削るのはライセンス違反なので、下記の圧縮によって消えてしまった著作権表記はコピペするなどして、必ず残しておいてください。

圧縮する前に

YUI Compressorはオンラインでも使えるページがあるようなんですが、コマンドプロンプト（黒い画面のやつです）で使った方が手軽で簡単なので、コマンドプロンプトから使う方法を書こうと思います。
ただ、コマンドプロンプトから使う場合はJavaの実行環境が必要ですので、先にインストールする必要があります。

JRE( Java Rutime Environment)のダウンロード

JREはJavaを動かすためのソフトウェアらしいです。よくわからないですが。
公式サイトの真ん中あたりにある「Javaソフトウェアの無料ダウンロード（JRE）」をクリックして、ダウンロードページからダウンロードしてください。
ダウンロードが終わったら、exeファイルをクリックしてインストールします。「同意します」や「次へ」を押していればインストールはすぐに終わります。

Windowsのパスの設定

コマンドプロンプトからJavaを実行するために、Windowsの環境変数にJavaへのパスを通します（必須ではないようですが、やっておいた方が便利みたいです）

派明日を通すために、まず最初にマイコンピュータを右クリックしてプロパティを開きます。
プロパティを開いたら「詳細設定」タブを選択し、下の方にある「環境変数」を押してください。

環境変数を開くと、2段に画面が別れていると思います。
下の画面の中からPATHという変数をクリックし、「編集」ボタンをおして、以下のテキストを追加してください。

;C:Program Files\Java\jre1.6.0_07\bin

これでパスの設定も完了。やっとYUI Compressorが使えます。

YUI Compressorのダウンロード

Yahoo! UI Library: YUI Compressorのページへ移動し、Download（真ん中のカラムのオレンジの部分の下にあります）からダウンロードします。
ダウンロードが終わったら、適当なフォルダ（僕はCドライブ直下においてしまいました）に解凍します。
これで圧縮の準備が整いました。あとは、圧縮したいCSSやJava Scriptを選んで圧縮するだけです。

YUI CompressorでCSS・Java Scriptの圧縮

※そのまま圧縮すると著作権表記が消えてしまうので、圧縮後にコピペするか、/* */のコメントを/*! */に書き換えてから圧縮してください。

コマンドプロンプトを開いて、先ほどYUI Compressorを解凍したディレクトリに移動し、さらにその中のbuildディレクトリに移動します。
2.4.2っていうのは現時点（2009年6月）での最新バージョンの数字です。

cd C:yuicompressor-2.4.2
cd build

ディレクトリへ移動したら次のコマンドを入力してください。

java -jar yuicompressor-2.4.2 --charset UTF-8 [圧縮したいファイル名] -o [圧縮後のファイル名]

圧縮前・圧縮後のファイル名はC:\～から入れないとダメかもしれないので、エクスプローラーのアドレスバーからコピペしちゃってください。
圧縮後のファイル名には良くある感じで-minとか付けちゃえば良いと思います。
問題がなければ何も表示されずに終了するので、圧縮したいファイルの数だけ繰り返します。

これでおわり。これも劇的な効果は無いかもしれないですが、なんにせよ気持ちいいです！これ、MTのファイルで使ったら効果あるかな？

UPDATE HISTORY

2009/11/05 00:55 誤字修正

CHIBATCH.JP