JavaScriptの軽量化ツール

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

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

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

[使用法]
コマンドプロンプトから実行する方法。

YUI Compressorにアクセスしダウンロードする。

解凍したら"build"を覗くとツール本体のファイル(.jar)がひとつ。

参照しやすいところ（例ではCドライブ直下）に移動すると後々ラクに。

コマンドプロンプトを起動して"yuicompressor-2.4.6.jar"ファイルのディレクトリを参照する（コマンドは、"cd ディレクトリパス"）。
次のコマンドを入力して軽量化を実行する。このときのjsファイル名の部分でもディレクトリを指定しよう。

java -jar yuicompressor-2.4.6.jar 元ファイル名パス.js -o 軽量後のファイル名パス.js

自分のコードを軽量化した結果、ファイルサイズは40～50%は小さくなり、動作速度も10～20msほど速く動作した。

オンライン上で実行する方法。

次のアドレスにアクセスhttp://yui.2clics.net/。
"ファイルを選択"ボタンをクリックして元ファイルを選択。
"Compress"ボタンをクリックすると軽量化開始。
"Download Generated File"を右クリックして保存する。
保存したファイルこそが軽量化された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

link: http://closure-compiler.appspot.com/home

開発段階の開発者向けツールを公開しているGoogle Code Labsのツール。

[使用法]

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

２つの軽量化ツールを記録した。圧縮率から考えるとClosure Compiler（Advancedオプション）が良い。しかし、ブラウザによってはYUI Compressorで圧縮したJSファイルの方が動作が高速であった（数十msの差）。甲乙つけ難い…。両方オンライン上で利用できるので、好きな方を利用すると良いだらう。

1870867837713745312 https://www.storange.jp/2011/10/javascript.html https://www.storange.jp/2011/10/javascript.html JavaScriptの軽量化ツール 2011-10-19T21:24:00+09:00 https://www.storange.jp/2011/10/javascript.html Hideyuki Tabata Hideyuki Tabata

200 200

72 72