YUI Compressorで簡単にjavascriptとCSSを圧縮

2015/04/20 追記

https://github.com/mishoo/UglifyJS

2012/02/11 追記
なんか変なまとめの影響でブクマが増えとる。。これ、2008年の記事だぞ。。
YUI Compresserも良いツールだけど最近だったらこの辺の方がいいよ。

http://dean.edwards.name/packer/

http://code.google.com/intl/ja/closure/compiler/

なぜコードの圧縮が有効か？

Webサイトの高速化フロントエンドのパフォーマンスの重要性 (Yahoo! developer netoworkより翻訳) || パフォーマンス・チューニングBlog: インターオフィス

要するに、Webサイトをより速くするための鍵は、フロントエンドのパフォーマンスを改善することにあるということです。
まず最初にやるべきなのは、フロントエンドのパフォーマンスチューニングです。
それには3つ理由があります。
1.フロントエンドにフォーカスするほうが、改善の余地が大きい。
単純にレスポンスを半分にできるとした場合、以下の結果になる。
　フロントエンド：全体の80% ===> 全体の40%分速くなる
　バックエンド　：全体の20% ===> 全体の10%分速くなる
2.バックエンドの改善より、フロントエンドの改善の方が時間がかからない。
バックエンドのプロジェクトは、アプリケーションアーキテクチャーやコードの再設計、コード上のクリティカルパスの見つけてそれを最適化、ハードウェアを追加したり改善したり、データベースを分散したり・・・かなり大変です。
3.フロントエンドのパフォーマンスチューニングはすでに改善の方法が実証されている。
Yahoo!でも50以上のチームが我々のベストプラクティスを適用することで、レスポンスを25%かそれ以上、改善出来た。

フロントエンドのパフォーマンスチューニングの重要性や実行方法は上記ブログがとても参考になります。

最近、主流のリッチインターフェースのUIには欠かせないものとなったjavascriptやCSS、リッチになるに従い当然ながらどんどんと容量もかさんできます。
数千行あるコードがユーザーからのリクエストの度にダウンロードされているのでは無駄なトラフィックが発生してしまいます。
そこでYUI Compressorを使って簡単にコードを圧縮してみましょう。

YUI Compressorを使う下準備

必要環境

Java >= 1.4 * 必須

Webコンソールを使うならば下の環境も必要(どんなものかは後記)

PHP 4.2 以上
Apache(上のphpのバージョンが動けば大丈夫なはず)

Yahoo! UI Library: YUI Compressorより本体をダウンロード(2008/01/17現在最新は2.2.4)して解凍したフォルダを適当なディレクトリに配置。

├─build  ････ yuicompressor-2.2.4.jarが入ってる
├─doc    ････ ドキュメント
├─lib    ････ ソースから利用されているjarファイル？
├─src    ････ javaのソース
└─web    ････ Webフォームからjavascriptを圧縮するPHPスクリプトやらjs

コマンドラインから実行

仮に圧縮したいもとのファイルを/path/to/myfile.jsとして
圧縮後のコンパクトなファイルを/path/to/myfile-min.jsとすると
buildの中まで移動して以下のようなコマンドを実行するだけで圧縮したJSファイルが生成される

java -jar yuicompressor-2.2.4.jar /path/to/myfile.js -o /path/to/myfile-min.js

他、いろいろなオプションについては以下のusageを参照のこと(落としてきたファイルのdoc/READMEと同一)
http://www.julienlecomte.net/yuicompressor/README

Webフォームにて利用する

YUI Compressorには上記のようなJavaScript圧縮用のWebフォームが同梱されています。

準備

web配下を公開ディレクトリとしてapache側にて設定します。
入出力・内部エンコード共にUTF-8になっていますので.htaccessなどで以下のように設定するといいでしょう。

php_value mbstring.internal_encoding UTF-8
php_value mbstring.http_input UTF-8
php_value mbstring.http_output UTF-8

使い方

使い方は簡単

テキストエリアにjsコードを貼り付けて「Compress」ボタンを押す
テキストエリアの中身は圧縮された*1コードになるのでコピーしてローカルに保存

試しにProtoType.js(ver1.6)を圧縮してみました。

結構違います。

実際にHTTP経由では更にgzipされるのでかなり小さくなるはず*2

難点としてはCSS用のWebフォームがないことくらいで簡単に圧縮できちゃいます。
最初は僕もjavaコマンドでやるの。。。ﾒﾝﾄﾞｸｾと思っていましたが、やってみると想像以上に簡単に使えるようになるので是非お試しください

蛇足１：なんで難読化しないか？

Webサイトの高速化ルール10　コードのサイズを圧縮する! (Yahoo! developer netoworkより翻訳) || パフォーマンス・チューニングBlog: インターオフィス

「圧縮」は安全ですし簡単ですが、「難読化」はより複雑で、バグを生み出す可能性があります。「難読化」は（変換すべきではない）APIやシンボルを変換してしまう場合がありますし、デバッグもやりにくくなります。私自身は「圧縮」では問題が発生したことはありませんが、「難読化」ではバグを経験したこともあります。U.S.のトップ10サイトの場合、「圧縮」だけで21%、「難読化」なら25%、サイズを減らすことができます。「難読化」はよりサイズを減らすことができますが、私としては、リスクとメンテナンスコストを減らす観点から、、「圧縮」だけにすることをお奨めします。

YUIのJSライブラリには「XXXX-min.js」というファイルが同梱されていますが、やはり難読化はされていません。
また、難読化ツールの精度もやはり難しく。。個人的には大体が難読化してまともに動いた試しがありません。

前提、リバースエンジニアリングの危険性を考慮した上でのJSを書くということである程度回避できるのかなと思っているのでそんなに気にしていなかったり。
でも、iGoogleのJSソースを見ると難読になってるんですよねー。。。あれはウィザード級の人たちが1バイトを減らす為にショートコードで書いてるだろうと想像してますけど。

蛇足２：Expireも考えてできるといいなー

JavaScriptとCSSを圧縮するPHPスクリプト「jscsscomp」:phpspot開発日誌

JavaScriptとCSSを圧縮するPHP スクリプト「jscsscomp」。
次のようにJavaScriptを圧縮できるPHPクラスが提供されています。

HTTPリクエストを減らすという意味ではこういうツールも効果的とは思うのですが、、

Webサイトの高速化ルール3　Expiresヘッダーを追加しよう! (Yahoo! developer netoworkより翻訳) || パフォーマンス・チューニングBlog: インターオフィス

非常に遠い未来の期限をExpiresヘッダーに指定してユーザのブラウザキャッシュを再利用することで、ユーザとの接続において、1byteも送信すること無しにページを表示することができようになります。

非常に遠い未来の期限をExpiresヘッダーに指定した場合、コンポーネントを実際に変更する必要があれば、コンポーネントのファイル名を変更しなければならないことを忘れないで下さい
Yahoo!では、コンポーネントのファイル名にバージョン番号を含める（例えばyahoo_2.0.6.js.のように）ことで、ビルドプロセスでこの作業を実施しています。

新規ユーザーばかりがくるよりも、実際は何度も訪れるユーザーが多いと思うのでコッチの方が効果的だし、リリースするバージョンは圧縮するんだしバージョン管理もできていいことずくめ！！！と思うのでその辺加味して、ちょろっとPHP用のライブラリでも作って見たいなという今日この頃。

*1:すべてのコメントを削除するだけではなく、不要な空白・改行・タブが除去された

*2:やり方はコチラを参照⇒＠IT：mod_deflateによるコンテンツの圧縮転送（1/3）

Affamative Way

前向きにグダグダいいながらコード書く