JavaScriptの軽量化ツール

Nicholas C. Zakas氏著の"ハイパフォーマンスJavaScript"という本を読んでいると、JavaScriptファイルを軽量化するツールの話が目に留まった。そこで今回はその軽量化ツールの紹介だけ記録しようと思う。なおこの記録では便宜上、軽量化と圧縮化を同義として扱う。

Yahoo社員のJulien Lecomte氏が開発したJAVA言語ベースの軽量化ツール。

[使用法]
コマンドプロンプトから実行する方法。
  1. YUI Compressorにアクセスしダウンロードする。
  2. 解凍したら"build"を覗くとツール本体のファイル(.jar)がひとつ。
  3. 参照しやすいところ(例ではCドライブ直下)に移動すると後々ラクに。
  4. コマンドプロンプトを起動して"yuicompressor-2.4.6.jar"ファイルのディレクトリを参照する(コマンドは、"cd ディレクトリパス")。
  5. 次のコマンドを入力して軽量化を実行する。このときのjsファイル名の部分でもディレクトリを指定しよう。
  6. java -jar yuicompressor-2.4.6.jar 元ファイル名パス.js -o 軽量後のファイル名パス.js
  7. 自分のコードを軽量化した結果、ファイルサイズは40~50%は小さくなり、動作速度も10~20msほど速く動作した。

オンライン上で実行する方法。
  1. 次のアドレスにアクセスhttp://yui.2clics.net/
  2. "ファイルを選択"ボタンをクリックして元ファイルを選択。
  3. "Compress"ボタンをクリックすると軽量化開始。
  4. "Download Generated File"を右クリックして保存する。
  5. 保存したファイルこそが軽量化されたJavaScriptファイル。
オプション
  • Minify only, do not obfuscate(縮小するだけで難読化しない):人間が読みやすい形のまま圧縮だけする。
  • Preserve all semicolons(すべてのセミコロンを保持):不要と判定されたセミコロンがあっても削除されない。
  • Disable all micro optimizations(すべての細かな最適化を無効にする):細かな最適化とは、obj['prop']obj.propに変換したり、{'obj':'prop'}{obj:'prop'}に変換したりする処理にあたる。


もうひとつ、個人的に興味が湧いた軽量化ツールに"Closure Compiler"がある。
Closure Compiler
開発段階の開発者向けツールを公開しているGoogle Code Labsのツール。

[使用法]
  1. 次のアドレスにアクセスhttp://closure-compiler.appspot.com/home
  2. Add a URL フォームにjsファイルのアドレス(URL)を入力するか、
    // ==ClosureCompiler==
    // @compilation_level SIMPLE_OPTIMIZATIONS
    // @output_file_name default.js
    // ==/ClosureCompiler==

    と入力してある大きなフォームにコードを直接コピーしてもOK!(その時はfunction hello()を消しておこう)
  3. オプションを設定(参考:http://code.google.com/intl/ja/closure/compiler/docs/compilation_levels.html
    -Whitespace only(空白だけ最適化):コメントや改行、不要なスペース(空白)を削除する圧縮法。
    -Simple(簡単な最適化):上記の最適化に加えて、ローカル変数名と関数の引数名を短く改名して圧縮する方法。短くなった名前は自動的に決められた名前である。
    -Advanced(高度な最適化):上の2つより圧縮率が大きい。圧縮法はSimpleプラス名前をより短くする機能と、デッドコード(不要と判定されたコード)を除去する機能、加えてグローバル変数のインライン化が行われる。ただこのオプションを利用する時は注意が必要である。なぜなら、作成者が意図して書いた必要なコードがあっても、このコンパイラが不要だと判断した場合削除されてしまうからだ。この事態を回避するため、今のコードをより厳格に記述する必要がある。圧縮率と動作の保障のためにも、このオプションで圧縮する前にここ(英語サイト)を参考にしながら、もう一度コードを見直してみよう。
  4. Compileボタンをクリックして軽量化開始。
  5. (成功しても失敗しても)軽量化が終えると、圧縮率と圧縮後サイズ、圧縮後コード本体、エラー、警告、ポストデータが表示される。
  6. The code may also be accessed at ~.js 部分のリンク先をダウンロードするか、圧縮後のコード本体をコピーして保存する。

2つの軽量化ツールを記録した。圧縮率から考えるとClosure Compiler(Advancedオプション)が良い。しかし、ブラウザによってはYUI Compressorで圧縮したJSファイルの方が動作が高速であった(数十msの差)。甲乙つけ難い…。両方オンライン上で利用できるので、好きな方を利用すると良いだらう。
1870867837713745312 http://www.storange.jp/2011/10/javascript.html http://www.storange.jp/2011/10/javascript.html JavaScriptの軽量化ツール 2011-10-19T21:24:00+09:00 http://www.storange.jp/2011/10/javascript.html Hideyuki Tabata 200 200 72 72