web-dev-qa-db-ja.com

すべての.jsファイルを1つの大きなバンドルにグループ化する必要がありますか？

現在のプロジェクトで遭遇している問題の1つは、前の開発者が多数の異なるファイルでJavaScriptコードをスパゲッティにしたことです。さまざまな場所で再利用されるモーダルダイアログがあり、同じ.jsファイルが2回読み込まれることがよくあります。

私の考えでは、_Layout.cshtml内のすべての.jsファイルをロードするだけで、一度だけロードされることがわかります。また、クライアントはこのファイルも1回だけダウンロードする必要があります。キャッシュする必要があるため、最初のページの読み込みを除いて、パフォーマンスへの影響はありません。

ASP.Netバンドルも使用しており、jQuery/bootstrap/etcのほとんどをCDNからロードしていることに注意してください。

ここで問題を引き起こすと私が考えていない他のことはありますか？すべてを1つのファイルにバンドルする必要がありますか？

javascriptasp.netperformancewebsite-performancebundling
7
Scottie

アプリケーションのサイズによっては、 [〜＃〜] amd [〜＃〜] ローダーを使用して modules を使用するようにアプリを変更する価値があるかもしれません。 RequireJS 。

コードを個別のモジュールに移動し、AMDローダーに依存関係を管理させることで、コードがより整理され、手動でファイルをロードする必要があるという問題を回避できます。これは、サーバーでホストされているファイルだけでなく、CDNから提供されるファイルにも使用できます。

また、ここにASP.NETアプリでRequireJSを使用する方法を説明する記事があります。

3
Alexander

すべてのJSを1つのファイルにまとめて考えられる唯一の欠点は次のとおりです。

  1. 一部のファイルは、一緒に「うまく機能しない」場合があります。たとえば、あるファイルの最後にセミコロンがない場合、別のファイルを最後にバンドルすると、問題が発生する可能性があります。これは私に二度以上起こりました。

  2. 一部のファイルは特定のパスにあることに依存している場合があり、1つのバンドルは1つのスポットにしか存在できません。相対パスが正しくなるように、一連の画像やcssファイルを移動するか、JSファイルを変更する必要がある場合があります。

  3. ライブラリが競合している可能性があります（1つのページがjquery 1.7と別の1.10を使用している可能性があります）

  4. 1つのファイルを変更すると、バンドル全体が新しいURLで再生成されます。

  5. 1つの非常に大きな初期ダウンロード。ページ間でJSの共通性があまりない場合は、リクエスト全体に広がる可能性のある大きなオーバーヘッドヒットであると主張できます。

それをすべて言ったので、私はそれのために行くと言います。上記はそれほど心配ではないと思います。あなたは問題が何になるかを非常に迅速に見るでしょう:)

1
Rocklan