1つのJS / CSSバンドル対。 1つはデフォルトで、もう1つはカスタム
いくつかのサイトでは、Javascript/CSSバンドルを使用してロード時間を短縮しています。私は常に各タイプに2つのバンドル（合計4つ）を使用しているので、
- JSバンドル1：すべてのページに標準のスクリプトが含まれています（jQuery、クロスページ関数など）
- JSバンドル2：そのページに固有のスクリプトが含まれています
- CSSバンドル1：一般的なサイトCSS（レイアウト、色など（
- CSSバンドル2：そのページに固有のCSSが含まれています
その背後にある私の理論は、JSバンドル1とCSSバンドル1が変更されることはないため、それらを個別のバンドルに入れることでキャッシュしてすべてのページで再利用できますが、JSバンドル2とCSSバンドル2には、ページ。これらのコードには、1行または2行のコードしか含まれない場合があります。この方法を使用してWeb開発会社のフリーランスの仕事をいくつか行ったところ、悪い/間違っていると言われました.2つのバンドルを使用するとリクエストの数が増えてページが遅くなるため、メディアタイプごとに1つのバンドルのみを使用する必要があります。これが2つのバンドルを使用するよりも遅い理由がわかりません。
Javascriptの例として（CSSについてはほとんど同じですが）
最初にアクセスしたページ（page1.htmlと言う）：すべてのページで使用される100kbの標準スクリプトと5kbのカスタムスクリプト
私の方法では、ユーザーは2つのリクエストで105kbのメディアをダウンロードする必要があります
この方法では、ユーザーは1回のリクエストで105kbのメディアをダウンロードする必要があります
最初の訪問では、私は彼らの方法が速いことを認めますが、
2番目にアクセスしたページ（page2.html）：100kbの標準スクリプトと3kbのカスタムスクリプト
私の方法では、標準スクリプトは既にキャッシュされているため、3kbのスクリプトをダウンロードするだけで済みます。
メソッドを使用すると、ユーザーは3kbのカスタムスクリプトだけで103kbのスクリプトをダウンロードする必要があります。
しかし、彼らは彼らの方法がより速いと主張しています、これはどのように可能ですか？余分なリクエストを1つ行わなければならないので、ページの負荷をそれほど減らすことはできません。既に持っている100 kbのデータを再ダウンロードするのがより効果的です。
彼らはおそらく*正しいです。
JavaScriptとCSSコードを複数のファイルに分割するのは悪いことです。これらのファイルのコードの一部が1つのページでのみ使用されている場合でも、ページリクエストを減らすためにすべてを1つのファイルに保持する価値があります。理由をお見せしましょう。
彼らの方法（1つのファイルにすべてのCSS）：
- 最初のページのロード（1リクエスト、HTTP経由でロードされた108KB CSSファイル）
- 2番目のページの読み込み（0リクエスト、ブラウザーキャッシュからの108KB CSSファイル）
- 3番目のページの読み込み（0リクエスト、ブラウザーキャッシュからの108KB CSSファイル）
あなたの方法（複数のファイルのCSS）：
- 最初のページの読み込み（1リクエスト、100 KBのCSSマスターファイルがHTTP経由で読み込まれます）
- 2番目のページの読み込み（1リクエスト、HTTP経由の5KBファイル、ブラウザキャッシュからの100KBファイル）
- 3番目のページの読み込み（1リクエスト、HTTP経由の3KBファイル、ブラウザキャッシュからの100KBファイル）
ページをロードするたびに、カスタムCSSの追加のHTTPページリクエストが必要になります。これがなければ、元のマスターファイルのリクエストに含まれていました。各サブページのカスタムコードがmuch大きくなる場合は、どちらが速いかをテストすることをお勧めしますが、説明するシナリオでは、単一の108KBリクエスト HTTP要求は高価です。 ので、100KB、5KB、および3KBファイルの3つの要求よりも高速
それを超えて（実際のパフォーマンスの差はとにかく小さいと思われます）、コードを編集するときに1つのファイルを開いたままにしておく方が、複数のファイル間を移動するよりも簡単です。大きなサイトでは、すぐに10個以上の個別のCSSファイルが作成される可能性があり、管理するのは決して楽しいことではありません。その理由だけでも、可能であればコードを1つのファイルに保存する価値があります。
*他に考慮すべき要素があるため、と思われます。例えば大きなCSSファイルとJavaScriptファイルを分割することが理にかなっている場合があります。めったにアクセスされないページに余分な500kbのJavaScriptが必要な場合は、サイトのメインJSファイルに含めるのに反対することができます。 minify のようなものを使用して、複数のCSS/JSファイルが要求された場合にHTTPリクエストを減らすこともできますが、これらのファイルをすべてジャグリングする必要があるという事実から逃れられませんそもそもコードエディター。
その背後にある私の理論は
それはあなたの問題だ。理論化しないでください-テスト。 FirebugまたはIE devツールでネットワークプロファイラーを使用して、ミリ秒単位で、どのメソッドが最速かを正確に確認できます。