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

JavaScriptを結合してミニファイする

Webサイト公開時にはJavaScriptミニファイしてサイズを小さくして通信にかかる時間を節約するのが定石です。また、複数のJavaSciptを別々のjsファイルとしてダウンロードさせるのでなく1つのjsファイルに統合してダウンロードさせることも2018年昨今は多いです。ダウンロードするファイルが多くなると通信セッションの数が増えて、同時セッション数の限界による通信待ちが発生し、ページを表示するのにかかるトータルの時間が増えてしまうからです。

ASP.NETではこの両方を簡単に行うことができます。開発時には複数のjsファイルを使ってコメントをつけたり、わかりやすい長い変数名を使用することができます。実行時にはそれらを結合して1つのjsファイルにしたうえで、ミニファイすることができます。

方法

プロジェクト直下のScriptsフォルダーの中に次の2つのjsファイルが存在する場合を例にします。

function Add(x, y) {
    return x + y;
}
■リスト1:Calc.js

function showMessage(message) {
    alert(message);
}
■リスト2:Message.js

まず、NuGetを使ってプロジェクトに、Microsoft.AspNet.Web.Optimizationをインストールします。

名前の通り、このパッケージはマイクロソフト製です。Visual StudioでテンプレートからWebアプリケーションを作成した場合は既定でインストールされています。

次に、プロジェクトにGlobal.asaxファイルを追加します。

jsファイルの結合とミニファイはApplication_Startのタイミングで指示するからです。Global.asaxの追加方法がわからない場合は、こちらの記事を参照してください。

Global.asaxを追加したらVBの場合Imports、C#の場合Usingを使って、冒頭でSystem.Web.Optimization名前空間への参照を作成してください。

Imports System.Web.Optimization
■リスト3:VB版 System.Web.Optimization名前空間への参照

using System.Web.Optimization;
■リスト4:C#版 System.Web.Optimization名前空間への参照

そして、Global.asaxのApplication_Startに次のとおりプログラムします。ここが肝です。

Sub Application_Start(ByVal sender As ObjectByVal e As EventArgs)

    BundleTable.Bundles.Add(New ScriptBundle("~/bundles/TestJs").Include(
                    "~/Scripts/Calc.js",
                    "~/Scripts/Message.js"))

End Sub
■リスト5:VB版 JavaScriptを結合してミニファイする

protected void Application_Start(object sender, EventArgs e)
{
    BundleTable.Bundles.Add(new ScriptBundle("~/bundles/TestJs").Include(
            "~/Scripts/Calc.js",
            "~/Scripts/Message.js"));
}
■リスト6:C#版 JavaScriptを結合してミニファイする

これでCalc.jsとMessage.jsは結合してミニファイされ、 /bundles/TestJs という仮想パスでアクセスできるようになります。

最後に、これを必要としている場所でHTMLのscriptタグを使って /bundles/TestJsを指定します。

<script src="/bundles/TestJs"></script>
■リスト7:結合・ミニファイされたJavaScriptを使用する

なお、実際にこれをやると/bundles/TestJsの内容は次のようになります。

function Add(n,t){return n+t}function showMessage(n){alert(n)}
■リスト8:結合・ミニファイされたJavaScript

結合しないでミニファイだけする

BundleTable.Bundles.Addで複数のjsファイルを指定しないで1つだけ指定するとそのファイルだけをミニファイします。

BundleTable.Bundles.Add(New ScriptBundle("~/bundles/Calc").Include(
               "~/Scripts/Calc.js"))

BundleTable.Bundles.Add(New ScriptBundle("~/bundles/Message").Include(
               "~/Scripts/Message.js"))
■リスト9:VB版 JavaScriptを結合しないでそれぞれミニファイする

BundleTable.Bundles.Add(new ScriptBundle("~/bundles/Calc").Include(
    "~/Scripts/Calc.js"));

BundleTable.Bundles.Add(new ScriptBundle("~/bundles/Message").Include(
    "~/Scripts/Message.js"));
■リスト10:C#版 JavaScriptを結合しないでそれぞれミニファイする

この例ではCalc.jsとMessage.jsはそれぞれミニファイされ /bundles/Calc と /bundles/Messageの仮想パスでアクセスできるようになります。

仮想パス

仮想パスはある程度自由につけられて、/bundles/… の代わりに /js/… とすることもできますし、/bundles/js/… とすることもできます。 仮想パスに .js などの拡張子をつけることはできないようです。(仕様不明。やってみたらダメでした。)

ASP.NET Webアプリケーション

Visual StudioでASP.NET WebアプリケーションでWebフォームまたはMVCのテンプレートからプロジェクトを作成すると、はじめからBunldeConfig.vb(またはBundleConfig.cs)の中にJavaScriptをミニファイするRegisterBundlesメソッドが組み込まれています。 このメソッドはglobal.asaxのApplication_Startから呼び出されます。

関連