バンドルと縮小Bundling and Minification

によってRick Andersonby Rick Anderson

バンドルと縮小は、2 つの手法を要求の読み込み時間を向上させるために ASP.NET 4.5 で使用することができます。Bundling and minification are two techniques you can use in ASP.NET 4.5 to improve request load time. バンドルと縮小は、サーバーへの要求の数が減り、(CSS および JavaScript を使用します。) など、要求された資産のサイズを小さくして読み込み時間を向上します。Bundling and minification improves load time by reducing the number of requests to the server and reducing the size of requested assets (such as CSS and JavaScript.)

現在の主要なブラウザーのほとんどの数を制限する同時接続ごとに 6 つの各ホスト名。Most of the current major browsers limit the number of simultaneous connections per each hostname to six. 6 つの要求が処理中に、ホスト上の資産に対する追加要求はブラウザーによってキューすることを意味します。That means that while six requests are being processed, additional requests for assets on a host will be queued by the browser. 次の図では、IE F12 開発者ツール ネットワーク タブは、サンプル アプリケーションのバージョン情報の表示に必要な資産のタイミングを示します。In the image below, the IE F12 developer tools network tabs shows the timing for assets required by the About view of a sample application.

B/M

灰色のバーには、6 つの接続の制限を待機しているブラウザーによって要求がキューに置かれた時間が表示されます。The gray bars show the time the request is queued by the browser waiting on the six connection limit. 黄色のバーは、最初のバイトへの要求時間、要求を送信し、サーバーから最初の応答を受信にかかった時間は、します。The yellow bar is the request time to first byte, that is, the time taken to send the request and receive the first response from the server. 青色のバーは、サーバーからの応答データを受信するのにかかる時間を表示します。The blue bars show the time taken to receive the response data from the server. 詳細なタイミング情報を取得する資産をダブルクリックすることができます。You can double-click on an asset to get detailed timing information. たとえば、次の図は読み込みのタイミングの詳細を示しています。、 /Scripts/MyScripts/JavaScript6.jsファイル。For example, the following image shows the timing details for loading the /Scripts/MyScripts/JavaScript6.js file.

上記の図は示しています、開始イベント、これにより、ブラウザーのため、要求がキューに入れられた時間は、同時接続の数を制限します。The preceding image shows the Start event, which gives the time the request was queued because of the browser limit the number of simultaneous connections. ここでは、要求は別の要求が完了するを待つ 46 のミリ秒のキューに格納されました。In this case, the request was queued for 46 milliseconds waiting for another request to complete.

バンドルBundling

バンドルとは、簡単に結合または複数のファイルを 1 つのファイルをバンドルする ASP.NET 4.5 での新機能です。Bundling is a new feature in ASP.NET 4.5 that makes it easy to combine or bundle multiple files into a single file. CSS、JavaScript、およびその他のバンドルを作成することができます。You can create CSS, JavaScript and other bundles. 少ないファイルは、少数の HTTP 要求とするには、最初のページ読み込みのパフォーマンスを改善するを意味します。Fewer files means fewer HTTP requests and that can improve first page load performance.

次の図は、バージョン情報に表示されるバンドルと縮小が有効になっていると、この時間が、以前は、同じタイミング ビューを示します。The following image shows the same timing view of the About view shown previously, but this time with bundling and minification enabled.

縮小Minification

縮小では、さまざまなスクリプトまたは不要な空白とコメントを削除して、1 つの文字を変数名を短縮することなど、css を別のコードの最適化を実行します。Minification performs a variety of different code optimizations to scripts or css, such as removing unnecessary white space and comments and shortening variable names to one character. 次の JavaScript 関数を検討してください。Consider the following JavaScript function.

AddAltToImg = function (imageTagAndImageID, imageContext) {
    ///<signature>
    ///<summary> Adds an alt tab to the image
    // </summary>
    //<param name="imgElement" type="String">The image selector.</param>
    //<param name="ContextForImage" type="String">The image context.</param>
    ///</signature>
    var imageElement = $(imageTagAndImageID, imageContext);
    imageElement.attr('alt', imageElement.attr('id').replace(/ID/, ''));
}

縮小後、は、関数は、次に縮小されます。After minification, the function is reduced to the following:

AddAltToImg = function (n, t) { var i = $(n, t); i.attr("alt", i.attr("id").replace(/ID/, "")) }

コメントと不要な空白文字を削除するだけでなく、次のパラメーターと変数名が名前を変更 (短縮)。In addition to removing the comments and unnecessary whitespace, the following parameters and variable names were renamed (shortened) as follows:

翻訳元Original 名前変更Renamed
imageTagAndImageIDimageTagAndImageID nn
imageContextimageContext tt
imageElementimageElement ii

影響のバンドルと縮小Impact of Bundling and Minification

次の表では、すべての資産を個別に一覧表示して、サンプル プログラムのバンドルと縮小 (B/分) を使用してのいくつかの重要な違いを示します。The following table shows several important differences between listing all the assets individually and using bundling and minification (B/M) in the sample program.

B/分を使用します。Using B/M B/分なしWithout B/M 変更Change
ファイルの要求File Requests 99 3434 256%256%
サポート技術情報の送信KB Sent 3.263.26 11.9211.92 266%266%
サポート技術情報の受信KB Received 388.51388.51 530530 36%36%
読み込み時間Load Time 510 MS510 MS 780 MS780 MS 53%53%

送信バイト数では、ブラウザーが要求に適用される HTTP ヘッダーを非常に冗長のバンドルとは大幅に短縮必要があります。The bytes sent had a significant reduction with bundling as browsers are fairly verbose with the HTTP headers they apply on requests. 受信したバイト数の減少がその大きさではありませんので、個のファイル (スクリプト\jquery-ui-1.8.11.min.jsスクリプト\jquery 1.7.1.min.js) 縮小は既に.The received bytes reduction is not as large because the largest files (Scripts\jquery-ui-1.8.11.min.js and Scripts\jquery-1.7.1.min.js) are already minified. 注: 使用するサンプル プログラムのタイミング、 Fiddler低速ネットワークをシミュレートするためのツール。Note: The timings on the sample program used the Fiddler tool to simulate a slow network. (、Fiddler からルールメニューの パフォーマンスモデム スピードのシミュレート)。(From the Fiddler Rules menu, select Performance then Simulate Modem Speeds.)

バンドルおよび縮小版の JavaScript デバッグDebugging Bundled and Minified JavaScript

開発環境で、JavaScript のデバッグが容易になります (場所、 compilation 要素で、 Web.configに設定されているファイルdebug="true")、JavaScript ファイルが組み込まれていないため、または縮小します。It's easy to debug your JavaScript in a development environment (where the compilation Element in the Web.config file is set to debug="true" ) because the JavaScript files are not bundled or minified. JavaScript ファイルのバンドルおよび縮小では、リリース ビルドをデバッグすることもできます。You can also debug a release build where your JavaScript files are bundled and minified. IE F12 開発者ツールを使用して、次のアプローチを使用して、縮小されたバンドルに含まれる JavaScript 関数をデバッグします。Using the IE F12 developer tools, you debug a JavaScript function included in a minified bundle using the following approach:

  1. 選択、スクリプトタブを選び、デバッグを開始ボタンをクリックします。Select the Script tab and then select the Start debugging button.
  2. [アセット] ボタンを使用してデバッグする JavaScript 関数を含む、バンドルを選択します。Select the bundle containing the JavaScript function you want to debug using the assets button.
  3. 縮小された JavaScript を選択して書式設定、構成ボタンを選択し、形式 JavaScriptします。Format the minified JavaScript by selecting the Configuration button , and then selecting Format JavaScript.
  4. 検索スクリプト入力ボックスで、デバッグする関数の名前を選択します。In the Search Script input box, select the name of the function you want to debug. 次の図のAddAltToImgで入力した、検索スクリプト入力ボックス。In the following image, AddAltToImg was entered in the Search Script input box.

F12 開発者ツールを使用したデバッグの詳細については、MSDN の記事を参照してください。 JavaScript エラーのデバッグに F12 開発者ツールを使用してします。For more information on debugging with the F12 developer tools, see the MSDN article Using the F12 Developer Tools to Debug JavaScript Errors.

制御のバンドルと縮小Controlling Bundling and Minification

バンドルし縮小が有効か無効で debug 属性の値を設定して、 compilation 要素で、 Web.configファイル。Bundling and minification is enabled or disabled by setting the value of the debug attribute in the compilation Element in the Web.config file. 次の XML でdebugはこれを true に設定するバンドルと縮小が無効になっています。In the following XML, debug is set to true so bundling and minification is disabled.

<system.web>
    <compilation debug="true" />
    <!-- Lines removed for clarity. -->
</system.web>

バンドルと縮小を有効にするには設定、debug値"false"にします。To enable bundling and minification, set the debug value to "false". オーバーライドすることができます、 Web.configによる設定、EnableOptimizationsプロパティをBundleTableクラス。You can override the Web.config setting with the EnableOptimizations property on the BundleTable class. 次のコードのバンドルと縮小を有効にしの設定をすべてオーバーライド、 Web.configファイル。The following code enables bundling and minification and overrides any setting in the Web.config file.

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                 "~/Scripts/jquery-{version}.js"));

    // Code removed for clarity.
    BundleTable.EnableOptimizations = true;
}

注意

しない限り、EnableOptimizationstrueまたは debug 属性、 compilation 要素で、 Web.configに設定されているファイルfalseファイルはバンドルや縮小されません。Unless EnableOptimizations is true or the debug attribute in the compilation Element in the Web.config file is set to false, files will not be bundled or minified. さらに、.min バージョンのファイルは使用されませんが、完全なデバッグ バージョンが選択されます。Additionally, the .min version of files will not be used, the full debug versions will be selected. EnableOptimizations debug 属性をオーバーライド、 compilation 要素で、 Web.configファイルEnableOptimizations overrides the debug attribute in the compilation Element in the Web.config file

バンドルを使用して、ASP.NET Web フォームと Web ページの縮小Using Bundling and Minification with ASP.NET Web Forms and Web Pages

バンドルを使用してと ASP.NET MVC での縮小Using Bundling and Minification with ASP.NET MVC

このセクションではプロジェクトのバンドルを確認して縮小、ASP.NET MVC を作成します。In this section we will create an ASP.NET MVC project to examine bundling and minification. という名前の新しい ASP.NET MVC インターネット プロジェクトを最初に、作成MvcBM既定値を変更することがなく。First, create a new ASP.NET MVC internet project named MvcBM without changing any of the defaults.

開く、アプリ\_開始\BundleConfig.csファイルを調べ、RegisterBundlesメソッドを作成し、登録して、バンドルを構成するために使用します。Open the App\_Start\BundleConfig.cs file and examine the RegisterBundles method which is used to create, register and configure bundles. 次のコードの一部を示しています、RegisterBundlesメソッド。The following code shows a portion of the RegisterBundles method.

public static void RegisterBundles(BundleCollection bundles)
{
     bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                 "~/Scripts/jquery-{version}.js"));
         // Code removed for clarity.
}

上記のコードは、という名前の新しい JavaScript バンドルを作成します ~/bundles/jqueryを含む、すべての適切な (デバッグまたはなく縮小する。 。vsdoc) 内のファイル、スクリプトワイルドカード文字列"/Scripts/jquery-{version} .js"に一致するフォルダー。The preceding code creates a new JavaScript bundle named */bundles/jquery* that includes all the appropriate (that is debug or minified but not .vsdoc) files in the Scripts folder that match the wild card string "~/Scripts/jquery-{version}.js". ASP.NET MVC 4、デバッグ構成では、ファイル、つまりjquery 1.7.1.jsバンドルに追加されます。For ASP.NET MVC 4, this means with a debug configuration, the file jquery-1.7.1.js will be added to the bundle. リリース構成でjquery 1.7.1.min.jsが追加されます。In a release configuration, jquery-1.7.1.min.js will be added. バンドルのフレームワークにはなどのいくつかの一般的な規則が次に示します。The bundling framework follows several common conventions such as:

  • ".Min"ファイルを選択するときにリリースFileX.min.jsFileX.jsが存在します。Selecting ".min" file for release when FileX.min.js and FileX.js exist.
  • デバッグ用の非".min"バージョンを選択します。Selecting the non ".min" version for debug.
  • 無視"-vsdoc"ファイル (などjquery-1.7.1-vsdoc.js)、IntelliSense によってのみ使用されます。Ignoring "-vsdoc" files (such as jquery-1.7.1-vsdoc.js), which are used only by IntelliSense.

{version} JQuery の適切なバージョンの jQuery バンドルを自動的に作成される前に示したワイルドカードに一致する、スクリプトフォルダー。The {version} wild card matching shown above is used to automatically create a jQuery bundle with the appropriate version of jQuery in your Scripts folder. この例では、ワイルド カードを使用すると次の利点があります。In this example, using a wild card provides the following benefits:

  • NuGet を使用して、バンドルの上記のコードまたはページの表示で jQuery 参照を変更することがなく新しい jQuery バージョンに更新することができます。Allows you to use NuGet to update to a newer jQuery version without changing the preceding bundling code or jQuery references in your view pages.
  • 自動的に選択デバッグ構成の完全なバージョンとリリースの".min"バージョンをビルドします。Automatically selects the full version for debug configurations and the ".min" version for release builds.

CDN の使用Using a CDN

次のコードでは、CDN の jQuery バンドルでローカル jQuery バンドルが置き換えられます。The follow code replaces the local jQuery bundle with a CDN jQuery bundle.

public static void RegisterBundles(BundleCollection bundles)
{
    //bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
    //            "~/Scripts/jquery-{version}.js"));

    bundles.UseCdn = true;   //enable CDN support

    //add link to jquery on the CDN
    var jqueryCdnPath = "https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";

    bundles.Add(new ScriptBundle("~/bundles/jquery",
                jqueryCdnPath).Include(
                "~/Scripts/jquery-{version}.js"));

    // Code removed for clarity.
}

上記のコードでは、jQuery を要求された CDN から中に、リリース モードとデバッグ バージョンの jQuery がフェッチされるローカルでデバッグ モードでは。In the code above, jQuery will be requested from the CDN while in release mode and the debug version of jQuery will be fetched locally in debug mode. CDN を使用する場合、CDN 要求が失敗した場合、フォールバック メカニズムが必要です。When using a CDN, you should have a fallback mechanism in case the CDN request fails. 次のマークアップは、jQuery は CDN 失敗要求に追加のレイアウト ファイル示しますスクリプトの末尾からフラグメントします。The following markup fragment from the end of the layout file shows script added to request jQuery should the CDN fail.

</footer>

        @Scripts.Render("~/bundles/jquery")

        <script type="text/javascript">
            if (typeof jQuery == 'undefined') {
                var e = document.createElement('script');
                e.src = '@Url.Content("~/Scripts/jquery-1.7.1.js")';
                e.type = 'text/javascript';
                document.getElementsByTagName("head")[0].appendChild(e);

            }
        </script> 

        @RenderSection("scripts", required: false)
    </body>
</html>

バンドルの作成Creating a Bundle

バンドルクラスIncludeメソッドは各文字列のリソースへの仮想パスが、文字列の配列を受け取ります。The Bundle class Include method takes an array of strings, where each string is a virtual path to resource. 次のコードから、RegisterBundlesメソッドで、アプリ\_開始\BundleConfig.csファイルは複数のファイルは、バンドルに追加を示します。The following code from the RegisterBundles method in the App\_Start\BundleConfig.cs file shows how multiple files are added to a bundle:

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
    "~/Content/themes/base/jquery.ui.core.css",
    "~/Content/themes/base/jquery.ui.resizable.css",
    "~/Content/themes/base/jquery.ui.selectable.css",
    "~/Content/themes/base/jquery.ui.accordion.css",
    "~/Content/themes/base/jquery.ui.autocomplete.css",
    "~/Content/themes/base/jquery.ui.button.css",
    "~/Content/themes/base/jquery.ui.dialog.css",
    "~/Content/themes/base/jquery.ui.slider.css",
    "~/Content/themes/base/jquery.ui.tabs.css",
    "~/Content/themes/base/jquery.ui.datepicker.css",
    "~/Content/themes/base/jquery.ui.progressbar.css",
    "~/Content/themes/base/jquery.ui.theme.css"));

バンドルクラスIncludeDirectoryディレクトリ (および必要に応じてすべてのサブディレクトリ) 内の指定された検索パターンに一致するすべてのファイルを追加するメソッドが提供されます。The Bundle class IncludeDirectory method is provided to add all the files in a directory (and optionally all subdirectories) which match a search pattern. バンドルクラスIncludeDirectoryAPI を次に示します。The Bundle class IncludeDirectory API is shown below:

public Bundle IncludeDirectory(
    string directoryVirtualPath,  // The Virtual Path for the directory.
    string searchPattern)         // The search pattern.

public Bundle IncludeDirectory(
    string directoryVirtualPath,  // The Virtual Path for the directory.
    string searchPattern,         // The search pattern.
    bool searchSubdirectories)    // true to search subdirectories.

バンドルは、Render メソッドを使用してビューで参照されている (Styles.Render css とScripts.RenderJavaScript 用)。Bundles are referenced in views using the Render method, (Styles.Render for CSS and Scripts.Render for JavaScript). 次のマークアップ、ビュー\Shared\_Layout.cshtmlファイルは ASP.NET のインターネット プロジェクトの既定のビューで CSS および JavaScript のバンドルを参照する方法を示しています。The following markup from the Views\Shared\_Layout.cshtml file shows how the default ASP.NET internet project views reference CSS and JavaScript bundles.

<!DOCTYPE html>
<html lang="en">
<head>
    @* Markup removed for clarity.*@    
    @Styles.Render("~/Content/themes/base/css", "~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @* Markup removed for clarity.*@
   
   @Scripts.Render("~/bundles/jquery")
   @RenderSection("scripts", required: false)
</body>
</html>

Render メソッドには、文字列の配列があるので、コードの 1 つの行で複数のバンドルを追加することができますに注意してください。Notice the Render methods takes an array of strings, so you can add multiple bundles in one line of code. 一般に、資産を参照するために必要な HTML を作成するレンダリング メソッドを使用するは。You will generally want to use the Render methods which create the necessary HTML to reference the asset. 使用することができます、Urlアセットを参照するために必要なマークアップことがなく、資産への URL を生成するメソッド。You can use the Url method to generate the URL to the asset without the markup needed to reference the asset. 新しい HTML5 を使用すると想定async属性。Suppose you wanted to use the new HTML5 async attribute. 次のコードは、modernizr を使用して参照する方法を示します、Urlメソッド。The following code shows how to reference modernizr using the Url method.

<head>
    @*Markup removed for clarity*@
    <meta charset="utf-8" />
    <title>@ViewBag.Title - MVC 4 B/M</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")

   @* @Scripts.Render("~/bundles/modernizr")*@

    <script src='@Scripts.Url("~/bundles/modernizr")' async> </script>
</head>

使用して、"*"ファイルを選択するワイルドカード文字Using the "*" Wildcard Character to Select Files

指定された仮想パス、Includeメソッドと、検索パターン、IncludeDirectoryメソッドには、いずれかを指定できる"*"プレフィックスまたは最後のパス セグメントをサフィックスとしてワイルドカード文字です。The virtual path specified in the Include method and the search pattern in the IncludeDirectory method can accept one "*" wildcard character as a prefix or suffix to in the last path segment. 検索文字列が大文字小文字を区別します。The search string is case insensitive. IncludeDirectoryメソッドには、オプションのサブディレクトリを検索します。The IncludeDirectory method has the option of searching subdirectories.

次の JavaScript ファイルでは、プロジェクトを検討してください。Consider a project with the following JavaScript files:

  • スクリプト\共通\AddAltToImg.jsScripts\Common\AddAltToImg.js
  • スクリプト\共通\ToggleDiv.jsScripts\Common\ToggleDiv.js
  • スクリプト\共通\ToggleImg.jsScripts\Common\ToggleImg.js
  • スクリプト\共通\Sub1\ToggleLinks.jsScripts\Common\Sub1\ToggleLinks.js

dir imag

次の表に示すように、ワイルドカードを使用してバンドルに追加されたファイルを示します。The following table shows the files added to a bundle using the wildcard as shown:

CallCall 追加されたファイルまたは例外が発生しましたFiles Added or Exception Raised
Include("/Scripts/Common/*.js")Include("/Scripts/Common/*.js") AddAltToImg.jsToggleDiv.jsToggleImg.jsAddAltToImg.js, ToggleDiv.js, ToggleImg.js
Include("/Scripts/Common/T*.js")Include("/Scripts/Common/T*.js") 無効なパターンの例外。Invalid pattern exception. ワイルドカード文字はプレフィックスまたはサフィックスにのみ使用できます。The wildcard character is only allowed on the prefix or suffix.
Include("/Scripts/Common/*og.*")Include("/Scripts/Common/*og.*") 無効なパターンの例外。Invalid pattern exception. 1 つだけのワイルドカード文字を許可します。Only one wildcard character is allowed.
含まれます ("/Scripts/Common/T*")Include("/Scripts/Common/T*") ToggleDiv.jsToggleImg.jsToggleDiv.js, ToggleImg.js
含まれます ("/Scripts/Common/*")Include("/Scripts/Common/*") 無効なパターンの例外。Invalid pattern exception. 純粋なワイルドカード セグメントが無効です。A pure wildcard segment is not valid.
IncludeDirectory("/Scripts/Common", "T*")IncludeDirectory("/Scripts/Common", "T*") ToggleDiv.jsToggleImg.jsToggleDiv.js, ToggleImg.js
IncludeDirectory ("/Scripts/Common"、"T*", true)IncludeDirectory("/Scripts/Common", "T*", true) ToggleDiv.jsToggleImg.jsToggleLinks.jsToggleDiv.js, ToggleImg.js, ToggleLinks.js

一般に優先が明示的に各ファイルをバンドルに追加する理由は次のファイルの読み込みのワイルドカードの上。Explicitly adding each file to a bundle is generally the preferred over wildcard loading of files for the following reasons:

  • ワイルドカードの既定値で、通常これが望ましくないのはアルファベット順に読み込むことにスクリプトを追加します。Adding scripts by wildcard defaults to loading them in alphabetical order, which is typically not what you want. CSS および JavaScript ファイルは頻繁に (アルファベット以外の) 特定の順序で追加する必要があります。CSS and JavaScript files frequently need to be added in a specific (non-alphabetic) order. このリスクを軽減するには、カスタムの追加をIBundleOrdererの実装が、各ファイルは、エラーが発生しやすいを明示的に追加します。You can mitigate this risk by adding a custom IBundleOrderer implementation, but explicitly adding each file is less error prone. 変更する必要がありますが、将来のフォルダーに新しい資産を追加するなど、 IBundleOrderer実装します。For example, you might add new assets to a folder in the future which might require you to modify your IBundleOrderer implementation.

  • 読み込みワイルド カードを使用してディレクトリに追加されるビューの特定のファイルは、そのバンドルを参照しているすべてのビューに含めることができます。View specific files added to a directory using wild card loading can be included in all views referencing that bundle. バンドルには、特定のスクリプトの表示を追加する場合、バンドルを参照している他のビューの JavaScript エラーが発生する可能性があります。If the view specific script is added to a bundle, you may get a JavaScript error on other views that reference the bundle.

  • その他のファイルがインポートされる CSS ファイルと、2 回読み込まれて、インポートされたファイル。CSS files that import other files result in the imported files loaded twice. たとえば、次のコードでは、ほとんどの 2 回読み込まれる jQuery UI テーマの CSS ファイルで、バンドルを作成します。For example, the following code creates a bundle with most of the jQuery UI theme CSS files loaded twice.

    bundles.Add(new StyleBundle("~/jQueryUI/themes/baseAll")
        .IncludeDirectory("~/Content/themes/base", "*.css"));
    

    ワイルド カード セレクター"*.css"は、フォルダー内の各 CSS ファイルを含む、コンテンツ\テーマ\基本\jquery.ui.all.cssファイル。The wild card selector "*.css" brings in each CSS file in the folder, including the Content\themes\base\jquery.ui.all.css file. Jquery.ui.all.cssファイルは、他の CSS ファイルをインポートします。The jquery.ui.all.css file imports other CSS files.

キャッシュのバンドルします。Bundle Caching

バンドルは、バンドルを作成するときから 1 年間の有効期限が切れる HTTP ヘッダーを設定します。Bundles set the HTTP Expires Header one year from when the bundle is created. IE がバンドルの条件付き要求を行わない Fiddler 示しています、前に表示したページに移動する場合はありません、バンドルの IE から HTTP GET 要求と、サーバーから HTTP 304 返信はありません。If you navigate to a previously viewed page, Fiddler shows IE does not make a conditional request for the bundle, that is, there are no HTTP GET requests from IE for the bundles and no HTTP 304 responses from the server. (その結果、各バンドルに対する応答を HTTP 304) F5 キーを持つ各バンドルの条件付き要求を行い、IE を強制することができます。You can force IE to make a conditional request for each bundle with the F5 key (resulting in a HTTP 304 response for each bundle). 使用して完全更新を強制する ^ f5 キーを押して (その結果、HTTP 200 の応答を各バンドルします)。You can force a full refresh by using ^F5 (resulting in a HTTP 200 response for each bundle.)

次の図は、 Caching Fiddler 応答ウィンドウのタブ。The following image shows the Caching tab of the Fiddler response pane:

fiddler のキャッシュのイメージ

要求The request
http://localhost/MvcBM_time/bundles/AllMyScripts?v=r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81
バンドルはAllMyScriptsクエリ文字列のペアを格納およびv = r0sLDicvP58AIXN\_mc3QdyVvVj5euZNzdsa2N1PKvb81is for the bundle AllMyScripts and contains a query string pair v=r0sLDicvP58AIXN\_mc3QdyVvVj5euZNzdsa2N1PKvb81. クエリ文字列vはトークンのキャッシュに使用される一意の識別子の値を持ちます。The query string v has a value token that is a unique identifier used for caching. ASP.NET アプリケーションが要求は、バンドルが変更されない限り、 AllMyScriptsこのトークンを使用してバンドルします。As long as the bundle doesn't change, the ASP.NET application will request the AllMyScripts bundle using this token. バンドル内のファイルが変更された場合、ASP.NET optimization フレームワークはバンドルのブラウザーの要求が、最新のバンドルを取得することを保証しながら、新しいトークンを生成します。If any file in the bundle changes, the ASP.NET optimization framework will generate a new token, guaranteeing that browser requests for the bundle will get the latest bundle.

IE9 F12 開発者ツールを実行して、以前に読み込まれたページに移動して場合、条件付きの GET 要求を各バンドル、および HTTP 304 を返すサーバーに対して表示しない IE 正しくされます。If you run the IE9 F12 developer tools and navigate to a previously loaded page, IE incorrectly shows conditional GET requests made to each bundle and the server returning HTTP 304. IE9 のブログ エントリで条件付きの要求が行われたかどうかの問題が理由を読み取ることができますを使用して Cdn と Web サイトのパフォーマンスを向上させるには、期限切れ日時します。You can read why IE9 has problems determining if a conditional request was made in the blog entry Using CDNs and Expires to Improve Web Site Performance.

LESS、CoffeeScript、SCSS、バンドルを Sass します。LESS, CoffeeScript, SCSS, Sass Bundling.

バンドルと縮小のフレームワークなど、中間言語を処理するためのメカニズムを提供するSCSSSass少ないまたはCoffeescript、し、結果として得られるバンドルに縮小などの変換を適用します。The bundling and minification framework provides a mechanism to process intermediate languages such as SCSS, Sass, LESS or Coffeescript, and apply transforms such as minification to the resulting bundle. たとえば、追加する*.less MVC 4 プロジェクト ファイル。For example, to add .less files to your MVC 4 project:

  1. 以下の内容を格納するフォルダーを作成します。Create a folder for your LESS content. 次の例では、コンテンツ\MyLessフォルダー。The following example uses the Content\MyLess folder.

  2. 追加、 *.less NuGet パッケージドットをプロジェクトにします。Add the .less NuGet package dotless to your project.
    NuGet ドットなしのインストールNuGet dotless install

  3. 実装するクラスを追加、 IBundleTransformインターフェイス。Add a class that implements the IBundleTransform interface. *.Less トランス フォームをプロジェクトに次のコードを追加します。For the .less transform, add the following code to your project.

    using System.Web.Optimization;
    
    public class LessTransform : IBundleTransform
    {
        public void Process(BundleContext context, BundleResponse response)
        {
            response.Content = dotless.Core.Less.Parse(response.Content);
            response.ContentType = "text/css";
        }
    }
    
  4. 小さいファイルのバンドルを作成、LessTransformCssMinify変換します。Create a bundle of LESS files with the LessTransform and the CssMinify transform. 次のコードを追加、RegisterBundlesメソッドで、アプリ\開始 (_s)\BundleConfig.csファイル。Add the following code to the RegisterBundles method in the App\_Start\BundleConfig.cs file.

    var lessBundle = new Bundle("~/My/Less").IncludeDirectory("~/My", "*.less");
    lessBundle.Transforms.Add(new LessTransform());
    lessBundle.Transforms.Add(new CssMinify());
    bundles.Add(lessBundle);
    
  5. 小さいバンドルを参照するすべてのビューには、次のコードを追加します。Add the following code to any views which references the LESS bundle.

    @Styles.Render("~/My/Less");
    

バンドルの考慮事項Bundle Considerations

バンドルを作成するときに実行する適切な規則では、バンドル名のプレフィックスとして「バンドル」が含まれます。A good convention to follow when creating bundles is to include "bundle" as a prefix in the bundle name. これによりする可能性のあるルーティング競合します。This will prevent a possible routing conflict.

バンドル内の 1 つのファイルを更新するとは、バンドルのクエリ文字列パラメーターの新しいトークンが生成され、フル バンドルが次回クライアントが、バンドルを含むページを要求をダウンロードする必要があります。Once you update one file in a bundle, a new token is generated for the bundle query string parameter and the full bundle must be downloaded the next time a client requests a page containing the bundle. 個別に各資産が含まれる場合、従来のマークアップでは、変更されたファイルのみをダウンロードできるようにします。In traditional markup where each asset is listed individually, only the changed file would be downloaded. 頻繁に変更される資産は、バンドルの適切な候補をできないがあります。Assets that change frequently may not be good candidates for bundling.

バンドルと縮小は、最初のページ要求の読み込み時間を向上させる主にします。Bundling and minification primarily improve the first page request load time. (JavaScript、CSS、およびイメージ) の資産をキャッシュと、web ページが要求されたバンドルと縮小は示しません、パフォーマンスの向上、同じページを要求するときにしたり、同じページのサイトと同じ資産を要求するようにします。Once a webpage has been requested, the browser caches the assets (JavaScript, CSS and images) so bundling and minification won't provide any performance boost when requesting the same page, or pages on the same site requesting the same assets. 設定しない場合、ヘッダー、資産を正しく有効期限が切れるとバンドルと縮小を使用しないでください、ブラウザーの鮮度ヒューリスティックがマーク資産古い数日後およびブラウザーは各資産の検証要求が必要です。If you don't set the expires header correctly on your assets, and you don't use bundling and minification, the browsers freshness heuristics will mark the assets stale after a few days and the browser will require a validation request for each asset. この場合は、バンドルと縮小は、最初のページ要求後にパフォーマンスが向上を指定します。In this case, bundling and minification provide a performance increase after the first page request. 詳細については、ブログをご覧ください。を使用して Cdn と Web サイトのパフォーマンスを向上させるには、期限切れ日時します。For details, see the blog Using CDNs and Expires to Improve Web Site Performance.

使用して各ホスト名ごとに 6 つの同時接続のブラウザーの制限事項を軽減することができます、 CDNします。The browser limitation of six simultaneous connections per each hostname can be mitigated by using a CDN. あるため、CDN は別のホスト名、ホスティング サイトよりも、CDN からの資産の要求は、ホスティング環境に 6 つの同時接続数の制限に対してカウントされません。Because the CDN will have a different hostname than your hosting site, asset requests from the CDN will not count against the six simultaneous connections limit to your hosting environment. CDN には、一般的なパッケージのキャッシュとのエッジ キャッシュの利点も提供できます。A CDN can also provide common package caching and edge caching advantages.

バンドルは、必要とするページでパーティション分割する必要があります。Bundles should be partitioned by pages that need them. たとえば、既定のインターネット アプリケーションの ASP.NET MVC テンプレート バンドルを作成します jQuery 検証 jQuery は別です。For example, the default ASP.NET MVC template for an internet application creates a jQuery Validation bundle separate from jQuery. 値を投稿しないで作成された既定のビューが入力があるないため、検証のバンドルが含まれますはありません。Because the default views created have no input and do not post values, they don't include the validation bundle.

System.Web.Optimizationで名前空間が実装されたSystem.Web.Optimization.dllします。The System.Web.Optimization namespace is implemented in System.Web.Optimization.dll. WebGrease ライブラリを利用しています (WebGrease.dll) の縮小の機能を順番に使用してAntlr3.Runtime.dllします。It leverages the WebGrease library (WebGrease.dll) for minification capabilities, which in turn uses Antlr3.Runtime.dll.

Twitter を使用して簡単な投稿を行い、リンクを共有します。自分の Twitter ハンドルが: @RickAndMSFTI use Twitter to make quick posts and share links. My Twitter handle is: @RickAndMSFT

その他の技術情報Additional resources

共同作成者Contributors