JavaScriptの最小化と最適化

Question

JavaScriptとスクリプトの依存関係を最適に最適化する方法について、少し混乱しています。

私はfoo.jsという名前のスクリプトとbar.jsという名前のスクリプトを持っているとします。

foo.jsは、jquery ui-sortableが必要であり、bar.jsは、jquery ui-datepickerが必要です。

私のサイトには、foo.jsとbar.jsの両方を必要とするページしかありません。

すべてのファイルを1つのファイルにまとめてコンパイルして、すべてのページで呼び出せますか？

または、必要な場合にのみ別々に呼び出して、これらのインスタンスで追加のhttp要求を行う方がよいでしょうか？

もっと良いオプションがありますか？

Answer 1

個人的には、必要な場合にのみ必要なリソースを呼び出すことをお勧めします。あなたは、不必要な輸入で各ページを管理する負担を負わず、あなたのウェブサイトの読み込み時間を改善します。

Answer 2

実際には、アプリケーションに関連するトレードオフの問題です。

最初に、jQuery from a CDNを使用することを検討することができます。これにより、キャッシュヒット（サーバーで使用される帯域幅の削減）の可能性が高まり、ユーザーが地理的に近い応答を得ることが保証されます。

カスタムコードに関して、最適化の影響を測定する最も良い方法は、アプリのテストを実行することです。 A/Bテストを設定して、サイトのユーザーエクスペリエンスを調べてみてください。

私の意見では、一般的には、プロダクションで一意のミニファイル（単一のHTTP要求になります）を使用するのが適切な解決策ですが、実際にはコードベースのサイズに依存します。