ASP.NET Coreでjsファイルをminifyする

ウェブサイトではBootstrapなどのCSSフレームワークや、jQueryなどのライブラリ、自作のcssファイルやjsファイルを各ページで適宜読み込んで使用します。

これらのファイルはHTMLファイルとともにクライアント（ブラウザ）側にダウンロードされるので、そのサイズは小さければ小さいほど良いことになります。

そこでminifyといって可読性のために挿入されている改行、半角スペース、タブといった空白文字を削除してサイズを小さくするということを行ったり、そもそも配布されているライブラリではjquery.min.jsというようにminifyされたバージョンを選択することができるようになっています。

一般的なライブラリであればminifyバージョンを選択すればよいですが、自作のものは何かしらのツールやサービスを使用してminifyする必要があります。

ASP.NET Core 2.1以降には任意のcss、jsファイルを設定ファイルに基づいて自動的にminifyする仕組みが含まれています。拡張機能やNuGet経由で何かをインストールする必要はありません。

docs.microsoft.com

準備は簡単で、プロジェクトフォルダの直下にbundleconfig.jsonファイルを作成し、そこに少しばかりの記述をするだけです。

例えば、テンプレートからASP.NET Coreウェブアプリケーションを作成した場合、wwwroot/jsフォルダの中にsite.jsというファイルが用意されていると思います。

最初は中はコメントだけですが、それらを消して以下のようにちょっとしたJavaScriptを書いておきました。

$('#myButton').on('click', function () {
    console.log('Yey.');
});

それでは、このファイルをminifyするための設定をbundleconfig.jsonに書いてみます。

[
  {
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "wwwroot/js/site.js"
    ]
  }
]

シンプルで難しいことはないと思います。outputFileNameに出力ファイルのパス、inputFilesにminifyしたいファイルのパスを記述するだけです。

そして保存する、とそのタイミングで指定したファイルが自動的にminifyされます。

ソリューションエクスプローラーで見てみると、以下のようにsite.jsにsite.min.jsがぶら下がるように生成されていることが確認できます。

あとはこのminifyされたファイルを読み込むようにHTML側で指定すればよいだけです。とても便利です。

複数のファイルをそれぞれminifyしたい場合は以下のようにします。

[
  {
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "wwwroot/js/site.js"
    ]
  },
  {
    "outputFileName": "wwwroot/js/sidebarLinkActivate.min.js",
    "inputFiles": [
      "wwwroot/js/sidebarLinkActivate.js"
    ]
  }
]

ところで、inputFilesとあるので入力ファイルを複数指定して一つのminifyファイルにまとめることができます。

  {
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "wwwroot/js/site.js",
      "wwwroot/js/sidebarLinkActivate.js"
    ]
  }