スクリプトをページごとに1つのバンドルにバンドルするのが良い方法ですか、それとも複数のバンドルを使用する方が良いですか？

私が取り組んでいるWebアプリケーションには、3種類のスクリプトがあります（スタイルシートにも同じことが当てはまります）。

• すべての単一ページで必要なもの（jqueryなど）
• すべてではなくいくつかのページで必要なもの（たとえば、ユーザーがアップロードした画像を表示するページで使用されるライトボックスライブラリ）
• 単一のページで必要なもの（たとえば、そのページの機能に固有の何か）

各ページには、必要なすべてのスクリプトをまとめた独自のバンドルが必要ですか？または、各タイプのスクリプトを独自のバンドルにする必要があります（つまり、ページが3つのバンドルをロードする可能性があります-EssentialScripts.js、mediaLibraries.js、およびpageSpecificScripts.js）？または私が知らないより良いアプローチはありますか？

これらのスクリプトをバンドルするためのベストプラクティスは何ですか？また、さまざまなアプローチにはどのような利点/欠点がありますか？

（これがどの程度関連性があるかはわかりませんが、私が取り組んでいるプロジェクトはASP.NET MVCバンドルを使用しています。また、より簡単にするために、サードパーティのCDNからのファイルはないと仮定しましょう。それらはすべて同じ場所から読み込まれ、クライアントは他のサイトにアクセスする必要はありません。）

複雑なアプリケーションの場合、提案した分割を行うことは理にかなっています。一般的なビット、特に外部ライブラリは、アプリケーションコードほど頻繁に変更されません。したがって、これらはキャッシングの主要な候補です。すべてをバンドルすることでそれを防ぎます。一方、彼らは余分なHTTPリクエストを追加します。これにより、初期のエクスペリエンスが少し悪くなります。一般的なパターンは、外部ライブラリを1つのバンドルに、アプリケーションコードを別のバンドルに含めることです。特に後者が小さく、ページとビューの間で多くの共有がある場合、それは理にかなっています。

ただし、これは動くターゲットです。今日のベストプラクティスは、明日のアンチパターンです。http / 2が一般的である世界、またはクライアント側モジュールがすべての主要なブラウザーでサポートされている場合、アドバイスは変わります。