YUI Compressor を使って Script と CSS を最小化する方法

誰しも Web サイトを素早く表示したいと思いますが、その時に大きな障害となるのが、データの転送速度です。 少しでもデータの転送量を減らすために、JavaScript や CSS ファイルを最小化 (Minification) しましょう。

スクリプトの最小化

スクリプトを小さくする方法は、最小化 (Minification) と難読化 (Obfuscation) の二つがあります。 Minification では無駄なスペースや改行文字を取り除き、スクリプトを小さくします。 Obfuscation では Minification に加えて、変数名まで書き換えてスクリプトを小さくします。

JavaScript ファイルや CSS の Minification 及び Obfuscation ができるツールが YUI Compressor です。

YUI Compressor の使い方

YUI Compressor は Yahoo! から提供されています。以下のサイトからダウンロードできます。

YUI Compressor
http://developer.yahoo.com/yui/compressor/

尚、実行には Java の実行環境が必要です。またこの資料を書いている時点では、バージョン 2.3.6 が最新で、それを用いています。

Minification 最小化のみを行うためには、--nomunge スイッチを使います。

> java -jar yuicompressor-2.3.6.jar --type js -o input_script.js --nomunge output_script.js

Obfuscation 最小化に加えて難読化も行うためには、--nomunge スイッチを取り次のようにします。

> java -jar yuicompressor-2.3.6.jar --type js -o input_script.js output_script.js

また、CSS ファイルを処理する場合は、次のように --type スイッチを css にします。

> java -jar yuicompressor-2.3.6.jar --type css -o input_file.css --nomunge output_file.css

尚、UTF-8 の JavaScript で日本語が含まれていた場合、文字が壊れてしまいました。その点だけ注意しましょう。 エラーメッセージなどで日本語が必要になる場合は、メッセージのみを別ファイルにして、コード部分のみを Minification を実施するという方法も考えられなくはないですが、その場合はファイルが複数になることによって HTTP リクエストが増加することによるマイナス点についても配慮する必要があります。(リクエストが増えるとプロトコルオーバーヘッドの分、 転送量が増大します）