Visual Studio Express 2012 for Web でいってみる 7.Bundling and Minification
asp.net MVC4の「Bundling and Minification」にチャレンジしてみます。
「Bundling 」は、JavaScriptファイルやCSSファイルを1つのファイルにまとめ上げる機能で、「Minification」は改行や空白をカットしスクリプトサイズを圧縮する機能のようです。その結果、データ容量やクライアントからのリクエスト回数を最小化することができる。らしい。
参考資料は
プログラミング MICROSOFT ASP.NET4 (Microsoft Press)
- 作者: ディノエスポシト,クイープ
- 出版社/メーカー: 日経BP社
- 発売日: 2012/01/26
- メディア: 単行本
- 購入: 2人 クリック: 8回
- この商品を含むブログ (4件) を見る
function myfc_replabel() { var targets = document.querySelectorAll("label"); //"label"要素を抽出し for (var i = 0; i < targets.length ; i++) { //新しいlabel値に置き換える targets.item(i).innerHTML = _Myfc_getnewabel(targets.item(i).innerHTML); } } function _Myfc_getnewabel (labelvalue) { return ("Rep-" + labelvalue); }
...省略... <section id="loginForm"> <h2>ローカル アカウントを使用してログインします。</h2> @using (Html.BeginForm(new { ReturnUrl = ViewBag.ReturnUrl })) { @Html.AntiForgeryToken() @Html.ValidationSummary(true) @* Bundlテスト用に追加 ここから*@ <script src="@Url.Content("~/Scripts/Myscripts/MyJavaScript1.js")" type="text/javascript"></script> <input type="button" value="テスト実行" onclick="myfc_replabel()" /> @* Bundlテスト用に追加 ここまで*@ <fieldset> <legend>ログイン フォーム</legend> ...省略...
bundles.Add(new ScriptBundle("~/bundles/myScript").Include( "~/Scripts/Myscripts/*.js"));
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/myScript")
}
ここの部分をデバッグ実行のF12でhtmlソースをみてみると
<script src="/Scripts/Myscripts/MyJavaScript1.js"></script>
<script src="/Scripts/Myscripts/tooltip.js"></script>
この2行に置き換えられています。
BundleTable.EnableOptimizations = false;
の1行を追加します。まずはfalseで試してみます。
<script src="/Scripts/Myscripts/tooltip.js"></script>
BundleTable.EnableOptimizations = true;
<script src="/Scripts/Myscripts/tooltip.js"></script>
1.Bundl指定
BundleTable.EnableOptimizations = true;
の記述を追加する
以上2ステップでOKな感じです。
尚、各種資料では、プロジェクト直下の[Web.config]の
<compilation targetFramework="4.5" debug="true"/>を圧縮時は
debug="false"にするように記述されていますが、
debug="true"のままでVS Webで「発行」をするとリリース環境の[Web.config]では
<compilation targetFramework="4.5" />とdebug= 以降が削除されているので、気にしなくてもいいのかもしれませんね。
(追記2014/04/10 削除してくれるわけは、Web.Release.configの
compilation xdt:Transform="RemoveAttributes(debug)" ですね。)
もう1点。
リリースサイトのScriptsフォルダから当該スクリプトファイルを削除してもいいか?
これはダメ実行時にエラーとなります。
詳細は未確認ですが、ページへのアクセス都度動的にスクリプトを圧縮してクライアントに送信しているのでしょうか?
スクリプトサイズを静的に圧縮したい場合は別途、minファイルを用意するってことになるんでしょうかね。参考ページの記述によると、minファイルがある場合、リリース環境にはminファイルを使用し、デバッグ時はminがつていないファイルが使用されるように記述されていたような気がする。(ごめん未確認です)
minファイルの作成についてのメモ書き
作成ツールはいくつかあるようですが、私の場合は「Microsoft Ajax Minifier」ってのを使ってみました。
参考:http://ajaxmin.codeplex.com//
nugetにもありましたね。
http://nuget.org/packages/AjaxMin
nugetからインストールすると[AjaxMin.dll]というファイルが[bin]フォルダにセットされる?件もまだ未確認です。
http://ajaxmin.codeplex.com// からダウンロードしてみました。
インストールしようとするとダウンロードした人が少なすぎるってエラーメッセージがでて驚きましたが、nugetからダウンロードする人の方が多いのかも。
どっちからインストールしても、コマンドプロンプトからminファイルをつくるんだろう、対話形式は多分無い。と思ってます。
以降、Ajax Minifierは別途改めてチャレンジ結果を記載したいと思います。
追記<2014/04/10>----------------------
EnableOptimizationsの設定で、Releaseコンパイル時は圧縮して、debug時は圧縮しないようにするには、条件付きコンパイル・ディレクティブ(#ifディレクティブ)を使う方法が便利です。
BundleTable.EnableOptimizations = true; //スクリプト圧縮する
#if DEBUG
BundleTable.EnableOptimizations = false;//スクリプト圧縮しない
#endif