カテゴリの jQuery とは直接かかわりがない内容です。JavaScript プログラムのソース圧縮ツールについてです。

Webサイトが少しでも華やかになるようにフラッシュが多用されることが多いですが、Google や jQuery のお陰で JavaScript が見直され、また JavaScript を使った開発の習熟度も上がり、頻繁に利用されるようになってきた感じを受けます(自分もその口ですが)。

ところで他人のブログを拝見していると、ロードする JavaScript のソースがあまりにも多く、読込みに時間が掛かっているのではないかと思われるようなサイトに、たまに出くわします。例えば WordPress のプラグインは、実際に使用しない場合でも JavaScript ソースを読み込むようになっているものもあります。

そんな訳で、オープンソースの JavaScript プログラムを利用させてもらうにしろ自分で作ったものにしろ、読込み時間を少しでも短縮したいと思い、JavaScript のソースを圧縮してくれるソフトを探して見ました。

ここでいう圧縮とは、zip や jpg のように、コード変換を伴うものではなく、空白やコメントなどを取り去ってサイズを小さくする機能を持ったものです。上図は左が圧縮前、右が圧縮処理後の例です。

変換はオンラインで圧縮できるサイトもありますが、ここでは自分の PC で動作するものにしました。

Microsoft Ajax Minifier 1.1 がそれです。

ダウンロードではソースコードが配布されているようですが、操作するだけですのでインストーラ付きの実行プログラムのものだけを利用するようにしました。

使い方ですが、Windows で動作させるソフトにしては珍しく、コマンド実行するタイプです。メニューから「Microsoft Ajax Minifier Command Prompt」を実行すると、下のようなコマンドプロンプト画面が表示されます。

実行は、

>ajaxmin ソースファイル名 /o 圧縮ファイル名

とすればOK。デスクトップにファイルを置いてある場合は、カレントディレクトリを変更してから実行すると指定が楽です。ajaxmin.exe への実行パスが環境に設定されているので、カレントを変更しても問題なく実行できます。

>pushd ¥users¥ログイン名¥desktop
>ajaxmin md5.js /o md5min.js

オプションに「/h」(hypercrunch mode)というのがあったので試してみたところ、サイズが半分ぐらいになりました。

サイボーズ光成さんの「md5.js」をお借りして試したところ、

ソースプログラム	35,778
通常の圧縮	22,563
/h を付けて圧縮	18,829

結果は上のようになりました。

ヘルプドキュメントをちらっと見たところ(英文なのでちらっとしか見れない orz)、使い方としてその他、統合開発環境の Visual Studio を使ってWebアプリケーションを構築する際、このモジュールを追加して自動で圧縮ソースを出力させたり、ajaxmin.dll を組み込んで他のアプリで利用できるようになっているようです。自分は Windows アプリケーションの開発からすっかり離れてしまったので、使う機会はないと思いますが。