ASP.NET Core での静的資産のバンドルと縮小

作成者: Scott Addie、David Pine

この記事では、ASP.NET Core Web アプリでこれらの機能を使用する方法など、バンドルと縮小を適用する利点について説明します。

バンドルと縮小とは

バンドルと縮小は、Web アプリに適用できる 2 種類のパフォーマンス最適化です。 バンドルと縮小を併用すると、サーバー要求の数が減り、要求される静的資産のサイズが小さくなるため、パフォーマンスが向上します。

バンドルと縮小を使用すると、主に最初のページ要求の読み込み時間が短縮されます。 Web ページが要求されると、ブラウザーによって静的資産 (JavaScript、CSS、および画像) がキャッシュされます。 そのため、同じ資産を要求する同じサイト上で、同じページまたは複数のページを要求する場合、バンドルと縮小を使用してもパフォーマンスは改善されません。 expires ヘッダーが資産に正しく設定されておらず、バンドルと縮小が使用されていない場合、ブラウザーの更新の間隔ヒューリスティックにより、数日後には資産が古くなっているとマークされます。 さらに、ブラウザーでは、各資産に対する検証要求が必要です。 この場合、最初のページ要求の後でも、バンドルと縮小によりパフォーマンスが向上します。

バンドル

バンドルでは、複数のファイルを単一のファイルに連結します。 バンドルを使用すると、Web ページなどの Web 資産のレンダリングに必要なサーバー要求の数を減らすことができます。 CSS、JavaScript など専用の個別のバンドルをいくつでも作成できます。ファイルが少なくなると、ブラウザーからサーバーへ、またはアプリケーションを提供するサービスからの HTTP 要求が少なくなることを意味します。 その結果、最初のページ読み込みのパフォーマンスが向上します。

縮小

縮小を使用すると、機能を変更せずにコードから不要な文字を削除できます。 その結果、要求される資産 (CSS、画像、JavaScript ファイルなど) のサイズが大幅に減ります。 縮小の一般的な副作用として、変数名を 1 文字に短縮する機能や、コメントと不要な空白を削除する機能があります。

次の JavaScript 関数を考えてみます。

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/, ''));
}

縮小により、関数が次のように短縮されます。

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

コメントと不要な空白の削除に加えて、次のパラメーターと変数名は次のように名前が変更されました。

元	名前の変更
imageTagAndImageID	t
imageContext	a
imageElement	r

バンドルと縮小の影響

次の表は、一般的な Web アプリについて、個別に資産を読み込む場合とバンドルと縮小を使用する場合の違いを示しています。

アクション	バンドルと縮小なし	バンドルと縮小あり	削減
ファイル要求	18	7	61%
転送されたバイト数 (KB)	265	156	41%
読み込み時間 (ミリ秒)	2360	885	63%

読み込み時間は改善されましたが、この例はローカルで実行されました。 ネットワークを経由で転送される資産にバンドルと縮小を使用すると、パフォーマンスが大幅に向上します。

前の表の図を生成するために使用されるテスト アプリは、特定のアプリには適用されない可能性がある一般的な改善を示しています。 バンドルと縮小によって読み込み時間が改善されるかどうかを判断するために、アプリをテストすることをお勧めします。

バンドルと縮小の戦略を選択する

ASP.NET Core は、オープンソースのバンドルと縮小ソリューションである WebOptimizer と互換性があります。 セットアップ手順とサンプル プロジェクトについては、WebOptimizer を参照してください。 ASP.NET Core には、ネイティブのバンドルと縮小ソリューションはありません。

Gulp、Webpack などのサードパーティ製ツールを利用すると、バンドルと縮小のワークフローを自動化したり、リンティングとイメージの最適化を行ったりすることができます。 バンドルと縮小を使用することで、アプリのデプロイ前に縮小されたファイルが作成されます。 デプロイ前のバンドルと縮小によって、サーバーの負荷が軽減されます。 ただし、バンドルと縮小を使用するとビルドの複雑さが増すので、静的ファイルでのみ機能することを認識しておくことが重要です。

環境ベースのバンドルと縮小

ベスト プラクティスとして、アプリのバンドルおよび縮小されたファイルを運用環境で使用することをお勧めします。 開発中は、元のファイルがあるので、アプリのデバッグが容易になります。

ビューで Environment Tag Helper を使用して、ページに含めるファイルを指定します。 Environment Tag Helper を使用すると、特定の環境で実行されている場合にのみコンテンツがレンダリングされます。

Development 環境で実行されている場合、次の environment タグを使用すると、未処理の CSS ファイルがレンダリングされます。

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>

Development 以外の環境で実行されている場合に、次の environment タグを使用すると、バンドルおよび縮小された CSS ファイルがレンダリングされます。 たとえば、Production または Staging で実行すると、これらのスタイルシートのレンダリングがトリガーされます。

<environment exclude="Development">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

その他のリソース

• 複数の環境の使用
• タグ ヘルパー