web-dev-qa-db-ja.com

バンドルの最適化がHTTP / 2で問題にならない理由

HTTP/2ではバンドルの最適化は不要 ：

HTTP/2では、このアプローチが推奨されます。これは、ファイルをブラウザーに個別にキャッシュできるため、バンドルの最適化が不要になるためです。

私の質問：

  1. これは、HTTP/2を使用するときに、スクリプトやその他のリソースをバンドルすることを考える必要がないことを意味しますか？
  2. この機能を有効にするHTTP/2には何がありますか？
bundling-and-minificationhttp2
36
alisabzevari

HTTP/2は、リソースのバンドルを廃止する「サーバープッシュ」をサポートしています。したがって、はい、HTTP/2を使用している場合、バンドルは実際にはアンチパターンになります。

詳細については、これを確認してください： https://www.igvita.com/2013/06/12/innovating-with-http-2.0-server-Push/

11
Georgi Yordanov

ブラウザは特定のドメインへの限られた数の接続しか開けなかったため、HTTP/1.1を使用するときに「ベストプラクティス」としてバンドリング最適化が導入されました。

典型的なWebページには、レンダリングするためにダウンロードする30以上のリソースがあります。 HTTP/1.1では、ブラウザはサーバーへの6つの接続を開き、6つのリソースを同時に要求し、それらがダウンロードされるのを待ってから、他の6つのリソースなどを要求します（または、一部のリソースは他より速くダウンロードされ、その接続は別のリクエストのために他のものより前に再利用されます）。ポイントは、HTTP/1.1では最大6つの未処理の要求しか持てないということです。

30個のリソースをダウンロードするには、5回のラウンドトリップが必要です。これにより、ページのレンダリングに多くの待ち時間が追加されます。

ページのレンダリングを高速化するために、HTTP/1.1では、アプリケーション開発者は単一のページに対する要求の数を減らす必要がありました。これは、ドメインシャーディング、リソースのインライン化、画像の分割、リソースのバンドリングなどの「ベストプラクティス」につながりますが、これらは実際にはHTTP/1.1プロトコルの制限を回避するための巧妙なハックにすぎません。

HTTP/2では多重化されているため、HTTP/2では状況が異なります。 HTTP/2プッシュを使用しなくても、HTTP/2の多重化機能はこれらすべてのハックを役に立たなくします。これは、単一のTCP接続を使用して数百のリソースを並行して要求できるためです。

HTTP/2を使用すると、同じ30個のリソースをダウンロードするのに必要なラウンドトリップは1回だけで済み、その操作で5倍のパフォーマンス向上が得られます（通常、ページのレンダリング時間が支配的です）。

Webコンテンツの傾向がより豊かになることを考えると、より多くのリソースがあります。リソースが多いほど、HTTP/2はHTTP/1.1に対してパフォーマンスが向上します。

HTTP/2多重化に加えて、HTTP/2プッシュがあります。

HTTP/2プッシュを使用しない場合、ブラウザはプライマリリソース（* .htmlページ）をリクエストし、ダウンロードして解析し、プライマリリソースが参照する30個のリソースをダウンロードするように調整する必要があります。

HTTP/2プッシュを使用すると、リソースを参照するプライマリリソースをリクエストしているときに30のリソースを取得でき、HTTP/2多重化のおかげで、ラウンドトリップを1つ節約できます。

これは、実際にはリソースのバンドルを忘れることができるHTTP/2の多重化機能です。

さまざまな会議で提供したHTTP/2セッションの slides をご覧ください。

59
sbordet

バンドルは、最新のJavaScriptビルドで多くのことを行っています。 HTTP/2は、追加の要求のコストをHTTP/1の場合よりもはるかに安くすることにより、クライアントとサーバー間の要求の量を最小限に抑える最適化のみに対処します

しかし、今日のバンドルは、クライアントとサーバー間のリクエスト数を最小限に抑えることだけではありません。他の2つの関連する側面は次のとおりです。

  • ツリーの揺れ ：WebPackやRollupなどの最新のバンドルツールは、（サードパーティのライブラリからでも）未使用のコードを排除できます。
  • 圧縮：より大きなJavaScriptバンドルをより適切に圧縮できます（gzip、zopfli ...）

また、HTTP/2サーバープッシュは、ブラウザーに不要なリソースをプッシュすることにより、帯域幅を浪費する可能性があります。

トピックに関する2つの良い投稿は次のとおりです。

これらの投稿はどちらも、「ビルドプロセスは今も続く」という結論に達しました。

5
jbandi

あなたのウェブサイトが

  1. HTTPで提供（HTTP 2.0では [〜＃〜] https [〜＃〜] が必要）
  2. [〜＃〜] alpn [〜＃〜] および HTTP 2 をサポートしないサーバーによってホストされています。
  3. 古いブラウザー（機密システムとレガシーシステム）をサポートするために必要
  4. HTTP 1と2の両方をサポートする必要があります（グレースフルデグラデーション）

バンドルを廃止する2​​つのHTTP 2.0機能があります。

  1. HTTP 2.0 MultiplexingおよびConcurrency（単一リソースで複数のリソースを要求できるようにするTCP接続）
  2. HTTP 2.0 サーバープッシュ（サーバープッシュにより、サーバーはクライアントがクライアントのキャッシュに必要と考える応答を先制的にプッシュできます）

PS：バンドルは、HTTP 2.0機能の急増によって排除される唯一の最適化手法ではありません。 image spriting、domain shardingなどの機能resource inlining（データURIを介した画像埋め込み）が影響を受けます。

HTTP 2.0が既存のWeb最適化手法に与える影響

3
Allan Chua