Asp Net MVCのビューごとに1つのバンドルを持つことは良い習慣ですか


8

バンドルとミニファイはすべて最適化とページの読み込みを高速化することを目的としているため、スクリプトごとに1つのバンドルとスタイルごとに1つのバンドルを作成し、ビューごとに1つのバンドルを作成すると、ブラウザに必要なすべてのスクリプトとスタイルを読み込むことができます。最大で2つのリクエストを作成します。それでは、私が持っているとしましょう_Layout.cshtml、私は3つのJSファイルを必要な場所bootstrap.jsjquery.jsおよびいくつかのcustom1.js私は1つのバンドル、このようなものを作成することができます。

bundles.Add(new ScriptBundle("~/bundles/layout").Include(
          "~/Scripts/bootstrap.js",
          "~/Scripts/jquery.js",
          "~/Scripts/custom1.js"));

その後の私は別のビューとしましょうUser.cshtml、私は必要bootstrap.jsjquery.jscustom2.js、再び私は1つのバンドルを作成します。

bundles.Add(new ScriptBundle("~/bundles/user").Include(
          "~/Scripts/bootstrap.js",
          "~/Scripts/jquery.js",
          "~/Scripts/custom2.js"));

同じアプローチをスタイルバンドルに使用できます。しかし、私が見るところによると、このように行うことは一般的な習慣ではありません。通常、バンドルはタイプベースで作成されます。たとえば、1つはブートストラップ用、1つはjquery用、1つはカスタムjs / cssファイル用などです。バンドルが多いほどサーバーへのリクエストが多くなるため、ページの読み込み時間。また、最初に説明した方法で問題を解決することは何ですか?

回答:


4

ページごとに1つのバンドルを使用することは、ほとんど逆効果になると思います。

バンドルの作成にはオーバーヘッドがあります...ただし、そのオーバーヘッドはアプリケーションインスタンスごとに1回発生します(最初の呼び出しの後にアプリケーションによってキャッシュされます)が、ページごとに新しいバンドルがある場合、それは各個別のページを意味します訪問した場合、配信する前に新しいバンドルを作成する必要があります。それはバンドルの目的をかなりデフォルトにするだろうと私は思います。

むしろ、私は通常2つのバンドルを持っています。1つのコアバンドルで、すべてのページで必要となることが予想され、初期プロジェクトがセットアップされるとほとんど変更されません。これには、コアスタイル、jQuery / knockout、その他のベースベンダーライブラリが含まれます。

2番目のバンドルは通常、アプリケーションごとのコンテキストです(たとえば、Usersバンドルには、一般的にユーザーに関連するモジュール化されたものがありますが、必ずしも特定のページに関連しているとは限りません)。

通常、ページ固有のものはバンドルに含まれていません。

バンドリングの実際のパフォーマンス効果(少なくとも、私が書く傾向のあるビジネスアプリケーションの場合)は、クライアントが最初に呼び出した後、再び変更されるまでそこにあることを考えると、それほど大きくはありません。

初めての訪問者の数が増えると予想される公開サイトがある場合は、少し異なるアプローチをとることがあります。


あなたは「目的を打ち負かす」という意味だと思います。
クレイグ

@クレイグ-私はそうしましたが、デフォルトもほとんど機能します...
jleach

3

番号。

ブラウザのキャッシュにより、すべてのページで同じバンドルを使用することにより、全体的に最良の結果が得られます。これは、ユーザーが最初のページにヒットしたときにすべてのcssとjsをダウンロードし、そのファイルを後続のページで再利用することを意味します。

バンドルの大部分は、jqueryやブートストラップなどのパッケージ化されたjavascriptフレームワークになると仮定します。カスタマイズされたコードの余分な数バイトは、ページ全体の読み込み速度にあまり影響を与えません。


2

ページごとのバンドルの欠点は、あるページのキャッシュされたバンドルを別のページで使用できないことです。通常必要なのは、一度ダウンロードされ、すべてのページに対してキャッシュされるスクリプト(jQueryブートストラップなど)の大部分です。サイト。

キャッシュの観点からの「最適な」ソリューションは、サイト全体のすべてのページのすべての.jsを含む単一のバンドルを持つことです。このアプローチの欠点は、バンドルが非常に大きくなるため、最初のページの読み込みが遅くなることです。これは、最初の印象がすべてである顧客向けのWebサイトには望ましくない場合があります。

「最良の」解決策は、技術の混合になる可能性が高いです。

  • 「コア」バンドル(jQueryやほぼすべてのページで使用されるBootstrapなど)とページごとのバンドル
  • サイト全体の単一のバンドル。おそらく、バンドルサイズに多くを追加するJavaScriptのヘビーページを除外します

1
また、通常、ボート全体を必要としない小さなページ(ログインページなど)には、1つまたは2つの「ライト」バンドルが必要です
jleach
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.