サイトのすべてのページの動作を含む1つの大きなJavaScriptファイルを一度に作成する方がよいでしょうか。または、そのページに固有のJavaScriptのみをロードするには？
キャッシュには1つの大きなファイルの方が適していることを理解しています。ただし、ブラウザはおそらく、それらを必要としないページに対して、あらゆる種類の不要なコード（「準備完了」のものに対するjQueryと添付イベント）を実行すると思います。
また、HTTPリクエストが少ないほど良いことも理解しています。したがって、私が見る3つのシナリオがあります。
何が一番？
それが助けになるなら、私はYiiフレームワークを持っています。
あなたの考えは正しいです。一般的には大きなファイルが好まれますが、これにより不要な Javascript 部分が実行される可能性があります。あなたの目標は、一般的に必要な Javascript ファイルを 1 ページだけに必要な部分に分離することでなければなりません。その後、大きなファイルに含めるか、個別にロードし続けるかをケースごとに決定できます。ほとんどのユーザーがアクセスするメイン ページを特定してみてください。必要なファイルはメイン ファイルに配置する必要があります。
補足として、 Javascript とオンデマンドの読み込みでモジュール関係を構築するためのRequire.jsを見ることができます。
あなたが指定したオプションから、1 つの大きな Javascript ファイルを作成します。最初は少し時間がかかる場合がありますが、アプリケーションの使用がよりスムーズになります。もちろん、それはすべての特定のケースに依存します。
また、非常にシンプルなHead.JS loaderを使用することをお勧めします。基本的に、最初のロードで複数のファイルを並行してロードする方が、単一の大きなファイルをロードするよりも実際には高速であると述べています (少なくとも head.js を使用)。これは、ノンブロッキングの並列方式でロードされているためです。特に、スクリプトを次々とダウンロードする古い世代のブラウザーでは特に (head.js Web サイトから取得した次のグラフのように):
編集: 言及するのを忘れていましたが、単一のファイルをロードする場合の追加の注意事項があります。一部のデバイスではキャッシュに制限があります。たとえば、iPhone 4 では制限が 25kb (かなり低い) です。
さて、私たちには2つの競合する力があります。A) 最初にロードするデータが多すぎます。B) データをロードする回数が多すぎる。
ここでバランスを見つけるのは繊細な作業であり、使用パターンを理解して知識に基づいた推測を行うことと、許容できる応答時間に達するまでテストと測定を行うことが必要です。
何が「ベスト」かを問う代わりに、自分のサイトで何が受け入れられるかを自問する必要があります。一般的なブロードバンド接続で 1 秒以内にフロント ページをロードできますか? 低速接続で 10 秒で問題ありませんか? 次に、許容できる速度になるまで測定して微調整します。
フロントページの読み込み速度またはサブページの読み込み速度を優先したい場合は、使用パターンについて考慮すべきことがありますか? すべての JavaScript を 1 つの大きなファイルにチャンクすると、最初のページの読み込みにペナルティがありますが、他のページはより速く読み込まれます。そしてその逆です。
多数の異なるページがあり、ユーザーが複数のページにアクセスすることが予想されない場合は、ページごとに 1 つの js ファイルを保持することを検討する必要があります。ただし、ページごとに多くのスクリプトを作成しないでください。ファイルの数はできるだけ少なくしてください。
1 つの js ファイルと複数の js ファイルの違いは、ほとんどが最初の読み込みです。1 つまたは複数のファイルがキャッシュされると、大きな違いはありません。複数のファイルの悪い点は、ネットワーク経由でロードするときに各ファイルの待ち時間が発生することです。
最後のリマインダー。ファイルを縮小し、可能であれば gzip を追加し、キャッシュ ヘッダーによってブラウザが js ファイルやその他のリソースを適切にキャッシュできるようにしてください。
Yii フレームワークに関しては、js ファイルが必要なとき (js ファイルを必要とするページ) にのみ js ファイルをロードすることを望んでいるようです。たとえば、次のようになります。
Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl.'/js/myfile.js', CClientScript::POS_HEAD);
Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl.'/js/myfile.js', CClientScript::POS_READY);
また、このメソッドは、必要な場合にのみ jQuery をロードします。しかし、特に効率の観点からではなく、使いやすさの観点からも、完全に同意するわけではありません。たくさんの JavaScript を使用している場合は、次のコマンドを使用して Yii に jQuery をすぐにロードさせることをお勧めします。
Yii::app()->clientScript->registerCoreScript('jquery');
次に、共通の関数 (サイトの複数の場所で使用する関数) を含む js ファイルを 1 つ用意し、これもすぐに読み込みます。次に、ページ固有の JavaScript の小さなスニペットにインライン JavaScript を使用します。