デバッグ時とリリース時でJavaScript/CSSの圧縮・非圧縮を使い分ける

ASP.NET C#

JavaScript や CSS はリリース時には、最適化や圧縮、複数ファイルを１ファイルに統合するなどといったパフォーマンスチューニングをすると思います。ですが、チューニング済みのJavaScriptやCSSファイルだとデバッグや修正ができません。


今回は、デバッグ時とリリース時で使い分けをする方法を整理します。


使い分けは条件付きコンパイル引数(#IF)を使って実現しますが、手法としてデザイナ側（.aspx）で分けるのとコード側（.cs）で分ける手法の２種類があります。デザイナ側で分ける手法の方がより簡単で分かりやすいですが、AjaxControlToolkitを使用している場合（実行時エラーになります）などアプリケーションの構成によっては利用できない場合もあります。その場合は、コード側で分ける方法を利用します。


注意点ですが、条件付きコンパイル引数の判定がデザイナ側の場合は web.config の compilation の設定によりますが、コード側の場合は web.config ではなく、アセンブリ（dll）がリリースモードでコンパイルされているかどうかによります。(もちろん、コンパイルしないタイプのASP.NETアプリケーションの場合はweb.configによります。)
す

  • デザイナ側（.aspx）で分ける手法

.aspx側で、#IF ディレクティブを使用しふ読み込むファイルを分けます。デバッグモードかどうかは、web.configの以下の設定によります。勘違いしやすいですが、dllのコンパイル時にReleseを設定した場合ではありません。web.configの設定です。


デバッグモード

  <compilation debug="true">


リリースモード

  <compilation debug="false">
    <% #if DEBUG Then %>
    
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/common.js"></script>
    <script type="text/javascript" src="/js/messages.js"></script>
    <script type="text/javascript" src="/js/login.js"></script>

    <link type="text/css" rel="Stylesheet" href="/css/common.css" />
    <link type="text/css" rel="Stylesheet" href="/css/login.css" />

    <% #Else %>

    <script type="text/javascript" src="/js/login_min.js"></script>
    <link type="text/css" rel="Stylesheet" href="/css/login_min.css" />

    <% #End if %>


AjaxControlToolkitを使用している場合、以下のメッセージが表示される事が有ります。この場合、デザイナ側で分ける事はできません。

コントロールにコード ブロック (<% ... %>) が含まれているため、コントロールのコレクションを変更できません。
  • コード側（.cs）で分ける手法

Page_Load時にHTMLヘッダを動的に追加し、デバッグ時とリリース時で追加するファイルを分けます。


デバッグモードかどうかは、コンパイル時の設定によります。web.configの設定は関係ありません。デザイナで指定する場合と異なるため注意する必要があります。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace WebApplication2
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

            List<string> jsFiles = new List<string>();
            List<string> cssFiles = new List<string>();

#if DEBUG

            jsFiles.Add("/js/jquery.min.js");
            jsFiles.Add("/js/common.js");
            jsFiles.Add("/js/messages.js");
            jsFiles.Add("/js/login.js");

            cssFiles.Add("/css/common.css");
            cssFiles.Add("/css/login.css");

#else

            jsFiles.Add("/js/login_min.js");
            jsFiles.Add("/js/login_min.css");

#endif

            foreach (string jsItem in jsFiles)
            {

                HtmlGenericControl jsHeader = new HtmlGenericControl("script");

                jsHeader.Attributes["type"] = "text/javascript";
                jsHeader.Attributes["src"] = jsItem;

                Page.Header.Controls.Add(jsHeader);

            }

            foreach (string cssItem in cssFiles)
            {

                HtmlLink cssHeader = new HtmlLink();

                cssHeader.Href = cssItem;
                cssHeader.Attributes["rel"] = "stylesheet";
                cssHeader.Attributes["type"] = "text/css";

                Page.Header.Controls.Add(cssHeader);

            }

        }
    }
}