Microsoft Ajax Minifierを使用してJavaScript,CSSを圧縮して１つのファイルにまとめる（Webサイトの高速化、ブラウザ側）

TIPS

Webサイトの高速化を行う手法の１つで、JavaScriptとCSSの圧縮・統合があります。複数のjs,cssファイルをまとめると、ブラウザとWebサイトとの接続回数が減り、CSSSpriteと同じく大きな効果があります。圧縮も効果はありますが、圧縮より統合の方が効果が大きいです。

実施に当たっては、CSSSpriteより js,cssの方が簡単なので、ファイルをまとめるという効果がどれほどのものなのか体感するにも良いと思います。

今回は、Microsoft Ajax Minifier を使った手法を紹介します。


Microsoft Ajax Minifier
http://ajaxmin.codeplex.com/


JavaScriptの圧縮・統合

AjaxMin.exe -JS -clobber -warn　-xml c:\jsmin.xml 2> c:\jserr.log

JavaScriptを対象に処理する場合は-JSオプションを設定します。-clobberオプションは出力ファイルを上書きするというオプション、-warnは、JavaScriptに問題があった場合にエラーを標準エラーに出力してくれます。（例では「2>」で、標準エラーをリダイレクトして、ログに出力しています）

ファイルを統合する場合は、設定をXMLファイルに記載します。output要素に圧縮・統合した出力ファイルを、input要素に圧縮・統合する入力ファイルを記載します。

以下の例だと・・「jquery-1.6.2.min.js」「common.js」「messages.js」「login.js"」の４ファイルが「login_min.js」に圧縮・統合されて１ファイルになります。

設定はいくつでもできるので、全ページ分の圧縮設定をしておきましょう。

c:\jsmin.xml

<root>
    <output path="js\login_min.js">
        < input path="js\jquery-1.6.2.min.js" />
        < input path="js\common.js" />
        < input path="js\messages.js" />
        < input path="js\login.js" />
    </output>
    <output path="js\ichiran_min.js">
        < input path="js\jquery-1.6.2.min.js" />
        < input path="js\common.js" />
        < input path="js\messages.js" />
        < input path="js\ichiran.js" />
    </output>
</root>

CSSの圧縮・統合

AjaxMin.exe -CSS -clobber -warn　-xml c:\cssmin.xml 2> c:\csserr.log

CSSを対象に処理する場合は-CSSオプションを設定します。オプション、XMLの指定方法はJavaScriptと変わりません。

ファイルをまとめる場合は該当ページで使用しているファイルはすべて１ファイルにまとめましょう。jQuery本体もプラグインも自作のJavaScriptもすべて１ファイルにまとめます。CSSも同じです。

統合・圧縮する際にJSやCSSに致命的な記述ミスがあると、エラーが発生し処理できない場合があります。私の場合は、CSSのカラー設定をblueを#blueと記載して出力できないことがありました。その場合は、-warnオプションで確認するか、処理が成功するまで入力用のJavaScriptファイルやCSSファイルの一部を消しながら問題箇所を特定します。

Usage:
AjaxMin.exe [-JS [JSOPTS]|-CSS [CSSOPTS]] OPTS* ((IFILE* [-out OFILE])|(-xml XFILE [-out ODIR]))

Valid OPTS are zero or more of:
  -analyze > provide extra analysis output.
  -clobber[:BOOL] > when false, will not overwrite existing output file.True always writes output file. Default is false.
  -echo > output is an echo of the original input.
  -enc:(in|out) ENC > input or output file text encoding.
  -help > display this usage message.
  -pretty[:N] > causes output to be on multiple lines, with N spaces per tab stop. Default N is 4.
  -res[:IDENT] RFILE > use a resource file to specify localization strings using non-existent object IDENT, Strings if not specified.
  -silent > silent mode; no error, warning, or message output.
  -term > ensure output ends in semicolon or other valid terminator.
  -warn[:N] > warning level for error messages sent to stderr.
  -? > same as -help.

Valid JSOPTS are zero or more of:
  -debug[:BOOL] > debug mode does not remove debug statements or function expression names. Default is False.
  -evals:(ignore|immediate|safeall) > ignore eval statements or ensure that that the immediate scope is safe, or all possibly-affected scopes are safe. Default is ignore.
  -fnames:(lock|keep|onlyref) > how to treat function names. Lock does not
        allow ANY function names to be removed or renamed; keep does not remove
        unreferenced function expression names, but does allow functions to be
        renamed; onlyref removes unreferenced function expression names and
        allows all function names to be renamed. Default is onlyref.
  -global:IDENT(,IDENT)* > specify one or more external global variables the code references.
  -inline[:BOOL] > whether to make sure strings are safe for HTML inline script. Default is True.
  -literals:(keep|combine) > whether to combine duplicate literals or keep them. Default is keep.
  -mac[:BOOL] > whether to add code to ensure output works in Mac Safari browsers. Default is True.
  -new:(keep|collapse) > whether to collapse certain constructors with known
        literals. Default is collapse.
  -rename:(all|localization|none) > local variable and function renaming method; default is all. Default is all.
  -unused:(remove|keep) > whether to keep or remove unused code. Default is remove.

Valid CSSOPTS are zero or more of:
  -comments:(none|all|hacks) > whether to keep all comments, remove all, or
        keep only the set of supported comment-based hacks. Default is none.
  -colors:(hex|strict|major) > how to treat color names: always convert to
        hexadecimal values, use strict color names if shorter, or use major-
        browser color names if shorter. Default is strict.

BOOL can be true, false, T, F, Yes, No, Y, or N.
N is a valid non-negative integer.
IDENT is a valid JavaScript identifier (case-sensitive).
ENC is a valid .NET text encoding scheme name (e.g.: UTF-8).
IFILE is a valid path to an existing source file.
OFILE is a valid path to the output file. Existing files will be clobbered
        if the -CLOBBER option is pecified.
XFILE is a valid path to an existing XML input file.
ODIR is a valid path to an output folder.
RFILE is a valid path to an existing .RESX or .RESOURCES file.

XML Format (XML element names and attributes are case-sensitive):
    <root>
      <output path="[OFILE]">
        <resource path="[RFILE]" name="[IDENT]"/>
        < input path="[IFILE]"/>
      </output>
    </root>
  Must have one or more <output> nodes.
  Each <output> node must have one or more < input> nodes and a
       single optional <resource> node.
  Attribute 'path' is optional for <output> nodes; required for
       < input> and <resource> nodes.

Everything is case-insensitive unless otherwise noted.
If no OFILE specified, output sent to STDOUT.
If no IFILE and no XFILE, input comes from STDIN.
If input comes from STDIN, -JS or -CSS option must be specified.
Multiple IFILE files will be concatenated to the output.