プログラムでJavaScriptをミニファイ(圧縮)する
単純にJavaScriptをミニファイする
Microsoft.Ajax.Utilities.MinifierクラスのMinifyJavaScriptメソッドを使用すると、JavaScriptをミニファイできます。
このMinifierクラスは、NuGetで、Microsoft.AspNet.Web.Optimizationをインストールすると使えるようになります。
よく知らない人のために念のためにVisual Studio 2017の場合の簡単な手順を書きます。
- ソリューションエクスプローラーでプロジェクトを右クリックして、NuGet パッケージの管理
- 左上の「参照」をクリックして、検索欄にMicrosoft.AspNet.Web.Optimizationを入力
- Microsoft.AspNet.Web.Optimizationが先頭に出てくるので、クリックして、右側の「インストール」ボタンをクリック
- 他の依存するものも一緒にインストールする確認が出るので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.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(" }");
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(" }")
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版 ミニファイエラーの確認これを実行すると次の２つのエラーが表示されます。
- (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: