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

Question

YSlow とGoogleの Page Speed の両方のアドオンは、スクリプト（およびスタイル）ファイルをそれぞれ1つのファイルに結合して、HTTPリクエストの数を減らすことを推奨しています。この点は、スクリプトファイルがサイト全体で一貫しているが、サイト全体で異なる要件を持つWebアプリケーションの場合です。

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

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

2. ページごとにファイルを結合します-欠点は、異なる要件を持つ各ページが異なる結合ファイルを取得することです（ページタイプごとに重い最初のロード）

3. 推奨事項の厳密な「1ファイルのみ」の解釈を無視し、必要に応じてページを複数のファイルにロードします。キャッシュは一般的なケースでHTTPリクエストの数を無効にします-欠点は各ページのHTTPリクエストの数です

考え？

Answer 1

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

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

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

ただし、1つのヒント。まだマージしていない場合は、自動的にマージしてください！

Answer 2

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

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

CSSについては、サイト全体に対して単一のファイルを提供し、CSSを可能な限り一般的にするようにします。ほとんどのページには、いくつかの固有のCSS要素しかありません。

Answer 3

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

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

そして最初の答えは純金です。

Answer 4

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

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