次の設定があるとします。
Page1.html
Page2.html
2 つの js ファイルと追加の css ファイルをマージすると、キャッシングに適していると言われました。しかし、個別のファイルもキャッシュされませんか? これがどのように違いを生むのかわかりません（おそらく保守性は別として-個人的には分離が好きです）。
このようなものを整理するための最もパフォーマンスが高く、最も賢明な方法は何ですか?
免責事項::マイクロ最適化はここでは問題ではありません。プロジェクトを開始する前にベスト プラクティスを知りたいので、後で再検討する必要はありません。
利点は次のとおりです。
ユーザーが Page1 にアクセスしてから Page2 にアクセスすると、ブラウザーは次の情報を取得します。
Page1.html
-> master.css
-> page1.css
-> page1.js
その後、しばらくして:
Page2.html
-> [ no need to re-fetch cached items ]
page1.css <-> page2.css と page1.js <-> page2.js が実質的に類似している場合、(最悪の場合) 2 つの DNS ルックアップと 2 つの HTTP ネゴシエーションを節約できますが、これはかなり遅くなる可能性があります。
少なくとも、page2.css と page2.js について、約 1KiB の着信 HTTP ヘッダーを 2 回「リッスン」する必要がなくなる可能性があります。(ただし、主要なブラウザーはすべて、これらの要求を連鎖させる可能性があります。)
ここで考慮すべきことがいくつかあります。
page1およびpage2ファイルのサイズ。それらが非常に小さい場合は、それらを個別のファイルに配置するための個別のhttpリクエストの余分なオーバーヘッドの価値はおそらくありません。
結合されたファイルの合計サイズ：一部のモバイルデバイスは、大きなファイルのキャッシュに熱心ではありません。
ユーザーがサイトにアクセスしているときに、ページ1とページ2の両方にアクセスする可能性。
補足：サーバー側の編成が心配な場合は、開発中にファイルを分離して、ビルドの一部としてファイルを1つにまとめることができます。