現在ログインしていません。
新規アカウント作成
ログイン

プログラムでJavaScriptをミニファイ(圧縮)する

単純にJavaScriptをミニファイする

Microsoft.Ajax.Utilities.MinifierクラスのMinifyJavaScriptメソッドを使用すると、JavaScriptをミニファイできます。

このMinifierクラスは、NuGetで、Microsoft.AspNet.Web.Optimizationをインストールすると使えるようになります。

よく知らない人のために念のためにVisual Studio 2017の場合の簡単な手順を書きます。

  1. ソリューションエクスプローラープロジェクトを右クリックして、NuGet パッケージの管理
  2. 左上の「参照」をクリックして、検索欄にMicrosoft.AspNet.Web.Optimizationを入力
  3. Microsoft.AspNet.Web.Optimizationが先頭に出てくるので、クリックして、右側の「インストール」ボタンをクリック
  4. 他の依存するものも一緒にインストールする確認が出るのでOK。(他にもライセンスの確認等が表示されます。)
さらに念のために言っておくと、NuGetの「インストール」とはそのプロジェクト内でその機能を呼び出せるようにすることを指しておりWindowsにアプリケーションをインストールするわけではありません。

下記の例ではサンプルとしてJavaScriptの文字列を作っている部分が長くなっていますが、Minifierクラス自体は引数なしでインスタンスを作成、すぐにMinifyJavaScriptメソッドを呼び出すことができます。

Microsoft.Ajax.Utilities.Minifier minifier = new Microsoft.Ajax.Utilities.Minifier();

System.Text.StringBuilder js = new StringBuilder(256);

js.AppendLine("function draw() {");
js.AppendLine("  for (var i = 1; i <= 18; i++)");
js.AppendLine("  {");
js.AppendLine("   ");
js.AppendLine("    //色計算");
js.AppendLine("    var colorElement = 128 + Math.floor((127 / 18 * i));");
js.AppendLine("    var c1 = 'rgb(0,' + colorElement + ',0)';");
js.AppendLine("    var c2 = 'rgb(50,' + colorElement + ',50)';");
js.AppendLine("    var c3 = 'rgb(100,' + colorElement + ',100)';");
js.AppendLine("    ");
js.AppendLine("    //描画");
js.AppendLine("    fillEllipse(60, 0, 10, c1);");
js.AppendLine("    fillEllipse(80 + count, 0, 10, c2);");
js.AppendLine("    fillEllipse(100 + (count * 2), 0, 10, c3);");
js.AppendLine("    ");
js.AppendLine("    //20度回転");
js.AppendLine("    ctx.rotate(20 * Math.PI / 180);");
js.AppendLine("  }");
js.AppendLine("}");

string result = minifier.MinifyJavaScript(js.ToString());
■リスト1:C#版 JavaScriptをミニファイする

Dim minifier As New Microsoft.Ajax.Utilities.Minifier()

Dim js As New System.Text.StringBuilder(256)

js.AppendLine("function draw() {")
js.AppendLine("  for (var i = 1; i <= 18; i++)")
js.AppendLine("  {")
js.AppendLine("   ")
js.AppendLine("    //色計算")
js.AppendLine("    var colorElement = 128 + Math.floor((127 / 18 * i));")
js.AppendLine("    var c1 = 'rgb(0,' + colorElement + ',0)';")
js.AppendLine("    var c2 = 'rgb(50,' + colorElement + ',50)';")
js.AppendLine("    var c3 = 'rgb(100,' + colorElement + ',100)';")
js.AppendLine("    ")
js.AppendLine("    //描画")
js.AppendLine("    fillEllipse(60, 0, 10, c1);")
js.AppendLine("    fillEllipse(80 + count, 0, 10, c2);")
js.AppendLine("    fillEllipse(100 + (count * 2), 0, 10, c3);")
js.AppendLine("    ")
js.AppendLine("    //20度回転")
js.AppendLine("    ctx.rotate(20 * Math.PI / 180);")
js.AppendLine("  }")
js.AppendLine("}")

Dim result As String = minifier.MinifyJavaScript(js.ToString)
■リスト2:VB版 JavaScriptをミニファイする

実行するとresultには次のようにミニファイされたJavaScriptが格納されます。

function draw(){for(var n=1;n<=18;n++){var t=128+Math.floor(127/18*n),i="rgb(0,"+t+",0)",r="rgb(50,"+t+",50)",u="rgb(100,"+t+",100)";fillEllipse(60,0,10,i);fillEllipse(80+count,0,10,r);fillEllipse(100+count*2,0,10,u);ctx.rotate(Math.PI/9)}}
■リスト3:

特徴

  • 改行・コメント・スペースはすべて削除されている
  • 変数の名前が変わっている
  • 計算できる式が計算されている。→最後の部分のrotate(20 * Math.PI /180)がミニファイ後はrotate(Math.PI/9)になっている。

ミニファイの動作を変更する

ミニファイの操作はオプションとして設定をすることで変更できるようですが、どう変えればよいのかはよくわかりません。 プログラム的には次のようにします。

Dim settings As New Microsoft.Ajax.Utilities.CodeSettings

'ここでsettingsを使ってミニファイのオプションを指定する。
settings.AlwaysEscapeNonAscii = True

Dim result As String = minifier.MinifyJavaScript(js.ToString, settings)
■リスト4:VB版 ミニファイの動作を指定する

エラー確認

Minifierクラスはエラーを取得できるErrorsプロパティ、ErrorListプロパティを持っており、次のように確認できます。

Microsoft.Ajax.Utilities.Minifier minifier = new Microsoft.Ajax.Utilities.Minifier();

System.Text.StringBuilder js = new StringBuilder(256);

js.AppendLine("function draw() {");
js.AppendLine("  for (var i = 1; i <= 18; i++)");
js.AppendLine("  {");
js.AppendLine("    ctx.rotate(20 * Math.PI / 180);");
js.AppendLine("  }");
//js.AppendLine("}"); //←わざと閉じ括弧をなくしてみる。

string result = minifier.MinifyJavaScript(js.ToString());

//▼エラー確認
if (minifier.Errors.Count > 0)
{
    minifier.Errors.ToList().ForEach(er => MessageBox.Show(er));
}
■リスト5:C#版 ミニファイエラーの確認

Dim minifier As New Microsoft.Ajax.Utilities.Minifier()

Dim js As New System.Text.StringBuilder(256)

js.AppendLine("function draw() {")
js.AppendLine("  for (var i = 1; i <= 18; i++)")
js.AppendLine("  {")
js.AppendLine("    ctx.rotate(20 * Math.PI / 180);")
js.AppendLine("  }")
'js.AppendLine("}") '←わざと閉じ括弧をなくしてみる。

Dim result As String = minifier.MinifyJavaScript(js.ToString)

'▼エラー確認
If minifier.Errors.Count > 0 Then
    minifier.Errors.ToList.ForEach(Sub(er) MsgBox(er))
End If
■リスト6:VB版 ミニファイエラーの確認

これを実行すると次の2つのエラーが表示されます。

  • (6,1-2): run-time error JS1107: Expecting more source characters
  • (1,1-16): run-time error JS1301: End of file encountered before function is properly closed: function draw()
ミニファイ自体はやってくれていてresultの値は次のようになりました。後ろの括弧は自動的につけてくれたようです。

function draw(){for(var n=1;n<=18;n++)ctx.rotate(Math.PI/9)}
■リスト7: