js / cssファイルを1つのファイルに結合する必要がありますか？

YSlowとGoogleのPage Speedアドオンはどちらも、HTTPリクエストの数を減らすためにスクリプト（およびスタイル）ファイルを1つのファイルに結合することをお勧めします。スクリプトファイルがサイト全体で一貫している場合、この点が確かにわかります。ただし、サイト全体で要件が異なるWebアプリケーションの場合。

私がそれを見る方法にはいくつかのオプションがあります：

1. サイト全体で使用されるすべてのファイルを結合し、すべてのページが同じ結合ファイルを取得します-不利な点は、スクリプトを乱雑にする未使用のコンテンツです（最初の読み込みが重い（コンポーネントスクリプトが変更された場合は再読み込みも））。

2. ページごとにファイルを組み合わせる-欠点は、要件が異なる各ページが異なる組み合わせファイルを取得することです（ページタイプごとに最初の読み込みが重い）

3. 推奨の厳密な「1つのファイルのみ」の解釈を無視し、必要に応じてページを複数のファイルにロードします。キャッシングでは、一般的なケースでHTTPリクエストの数を無効にすることが期待されます。欠点は、各ページのHTTPリクエストの数です。

考え？

オプション2は最悪です。つまり、必要なJSスクリプトの組み合わせが異なるすべてのページは、HTTPリクエストになります。パフォーマンスが大幅に低下します。

オプション1が最適です。結局のところ、ほとんどのユーザーはWebサイトのほとんどのページの「タイプ」にアクセスするため、ほとんどアクセスされない少数のページで必要とされる大きなJSファイルを除いて、すべてを1つのファイルに結合することは依然として有利です。

最初のページヒットは別のファイルよりも遅い場合がありますが、他のすべてのページヒットはキャッシュされたグローバルJSを使用するため、実行する価値があります。

ただし、1つのヒント。まだの場合は自動的にマージします！

通常、「グローバルJavascript」（jQueryと共通プラグイン）を1つのファイルに結合し、必要に応じて追加のプラグインを個別のファイルとして提供します。

たとえば、私が実行する1つのサイトの多くのページにデータテーブルがあるためglobal.js、jQuery、DataTables、およびSuperFish（メニュー用）を使用しています。サイトには「ライトボックス」を使用する2つのページがあるので、これら2つのページ用に個別のスクリプトを用意しています。

CSSの場合、私はサイト全体に1つのファイルを提供し、CSSをできるだけ一般的なものにしようとします。ほとんどのページには、いくつかの固有のCSS要素しかありません。

できるだけ少ないファイルを使用することをお勧めしますが、ページの読み込み時に必要な機能と、非同期の読み込みによって延期できる機能が分かれている場合があります。

十分な数のJSを2番目のカテゴリーにプッシュできる場合は、ページの認識される初期ロード速度を改善して、ユーザーのエクスペリエンスを向上させることができます。

これらすべてを組み合わせることはお勧めしません。共通ライブラリを使用している場合は、CDNを利用してJavaScriptを配信できます。その後、ブラウザーのキャッシュ（他のサイトが同じCDNを使用していると想定）と分散配信を利用できます。 MicrosoftとGoogleにはそれぞれ解決策があり（私も正直に使ったことはありませんが、確かに始めます）、他にも解決策があるかもしれません。関連するメモとして、SOにはこの質問があります：

ブラウザはいつJavaScriptキャッシュを自動的にクリアしますか？

最初の答えは純金です。