ファイルバンドリングとhttp/2：ベストプラクティスの再考

最新のJavaScriptニュースレターを購読して、ここをクリックして購読するためにここをクリックしてください。 今では、ほとんどすべてのJavaScriptアプリケーションがビルドプロセスを使用しています。 ES2015やTypeScriptから翻訳していなくても、コードへの接続と圧縮を何らかの形で実行することが標準的な慣行になっています。その理由は、HTTPリクエストを行う際にかなりのオーバーヘッドがあるためです。サービスが少なく、より大きなファイルは、提供される多くの小さなファイルよりも効率的です。ネットワークの基礎となるプロトコルであるHTTP/2の次のバージョンの採用により、ベストプラクティスを再考する時が来るかもしれません。

HTTP/2は、GoogleのSPDYプロトコルに基づいています。これは、既存のHTTP 1.1標準に基づいてページの読み込みのレイテンシを改善し、セキュリティを改善するように設計されています。この新しいプロトコルの作業は2012年に始まり、最初の開発バージョンはSPDYの直接コピーです。最終標準は2015年5月にリリースされ、今年5月にGoogleはChromeのSpdyをサポートしなくなると発表しました。

HTTP/2は前身とどう違うのですか？主な違いの1つは、HTTP/2がテキストベースのプロトコルではなく、

バイナリ

プロトコルであることです。これにより、よりコンパクトで、より断固とし、エラーが発生しやすくなります。このプロトコルの重要な利点は、多重化されていることです。つまり、単一の接続で複数のファイルを転送できることを意味します。広く公開されているもう1つの機能は、サーバープッシュです。これにより、サーバーはクライアントがリクエストする前にクライアントにリソースを転送し、キャッシュを事前に充填できます。 新しいプロトコルのサポートは、すべての主流のブラウザを含む非常に優れています。サーバー側では、Apache2、Nginx、およびMicrosoft IISによってサポートされており、node.js 5.0以上でもサポートされています。ほとんどのブラウザベンダーは、TLS接続でHTTP/2のみをサポートすると言いますが、Let's Encryptの無料SSL証明書の出現により、簡単な要件です。今年6月にW3Techsが収集したデータによると、現在、上位1,000万のWebサイトの約8.4％が新しい契約をサポートしています。 Chromeユーザーの場合は、HTTP/2およびSPDYインジケーター拡張機能を使用して、HTTP/2を介してどのWebサイトが提供されるかを明確に表示できます。

JavaScript開発者にとって、HTTP/2の採用はどういう意味ですか？複数のファイルをバンドルに接続する現在の練習により、ブラウザがコードを効率的にキャッシュすることが難しくなります。モジュールでコードの行を変更するには、バンドルファイル全体を再ダウンロードする必要があります。 HTTP/2マルチプレックスはリクエストを比較的安価にするため、コードをより小さなバンドルに分割し、キャッシュをよりよく使用して、アプリケーションがユーザーの帯域幅を効果的に利用できるようにするオプションがあります。

しかし、リクエストが安い場合、バンドルを完全にあきらめるべきですか？一見、これは理にかなっているようですが、HTTPリクエストのコストは考慮すべき唯一の要因ではありません。また、Webサーバーは、大量のファイルをどれだけ効率的に提供できるかを制限しています。 JavaScriptコミュニティの急増により、より小さく、より集中化されたモジュールに移行し、何らかのバンドルなしでこれらのファイルをクライアントに提供することは理想的ではありません。最も重要なことは、ファイルを組み合わせることでより良い圧縮を実現することで、帯域幅を保存することです。

では、いつhttp/2に切り替えることを検討する必要がありますか？答えは、状況に依存します。ブラウザのサポートは非​​常に優れていますが、ターゲットオーディエンスがIEの古いバージョンにまだ残っている場合、あなたは不運に陥っているので、訪問者の統計を確認して、これがほとんどのユーザーに利益をもたらす可能性があるかどうかを確認してください。私がこのすべてから得たのは、新しいプロトコルのサポートと採用が驚くほど順調に進んでおり、開発者として、それは私たちが無視できない傾向であるということです。

どのようなバンドル戦略を使用していますか？ HTTP/2に切り替えることを検討していますか、それともすでに切り替えているのでしょうか？コメントで教えてください！

ファイルバンドリングとHTTP/2

に関するFAQ（FAQ）

HTTP/1よりもHTTP/2の主な利点は何ですか？

HTTP/2には、HTTP/1よりもいくつかの利点があります。最も重要な利点の1つは、単一のTCP接続で複数のリクエストを多重化する機能です。この機能は、複数のリクエストを行うときに発生する可能性のあるレイテンシを減らし、それによりWebアプリケーションの全体的なパフォーマンスを改善します。 HTTP/2は、オーバーヘッドを削減し、サーバーのプッシュをサポートするヘッダー圧縮もサポートし、クライアントがリクエストする前にサーバーがクライアントにリソースを送信できるようにします。

ファイルバンドルはHTTP/2でどのように機能しますか？

http/2では、ファイルバンドリングはhttp/1ほど必要ではありません。これは、HTTP/2が一度に単一の接続で複数のリクエストを処理できるため、リクエストの数を減らすためにファイルをバンドルする必要性を排除するためです。代わりに、ファイルを個別にロードすることができ、キャッシュの使用率を改善し、ファイル管理と更新を簡素化できます。

http/2の多重化とは何ですか？

多重化はHTTP/2の重要な機能であり、複数のリクエストと応答を単一のTCP接続で同時に送信できます。これは、HTTP/1の大幅な改善であり、接続ごとに1つの要求のみを処理できます。多重化により、複数のリクエストに関連するレイテンシが減少し、Webアプリケーションのパフォーマンスが向上します。

サーバーはHTTP/2をどのように押し込んでいますか？

サーバープッシュは、クライアントがリクエストする前にサーバーがクライアントにリソースを送信できるようにするHTTP/2の機能です。これにより、クライアントがリソースを受信およびレンダリングするのにかかる時間を短縮することにより、Webアプリケーションのパフォーマンスを改善できます。サーバーは、最初のリクエストに基づいてクライアントが必要とすることを期待するリソースをプッシュできます。

なぜHTTP/2でファイルバンドリングが悪い練習と見なされているのですか？

HTTP/2はSEOにどのような影響を与えますか？

HTTP/2は、Webサイトの速度とパフォーマンスを改善できるため、SEOにプラスの影響を与える可能性があります。ページの読み込み速度がランキングファクターであるため、サイトが検索エンジンの結果でランク付けされる傾向が高くなります。さらに、HTTP/2のマルチプレックスおよびサーバープッシュ機能により、ユーザーエクスペリエンスが向上し、SEOの改善にも役立ちます。

http/2でセキュリティを改善する方法は？

HTTP/2は、クライアントとサーバー間で送信されたデータを暗号化するHTTPSの使用をサポートすることにより、セキュリティを改善します。これにより、伝染中に機密情報がインターセプトまたは改ざんされないようになります。さらに、HTTP/2のバイナリフレームメカニズムは、HTTP/1プロトコルに対する攻撃を防ぐのに役立ちます。

HTTP/2はモバイルブラウジングにどのように影響しますか？

HTTP/2は、遅延を削減し、Webアプリケーションの速度を上げることにより、モバイルブラウジングを大幅に改善できます。これは、より遅いインターネット接続を使用することが多いモバイルユーザーにとって特に有益です。 HTTP/2のマルチプレックスおよびサーバープッシュ機能は、モバイルアプリケーションのパフォーマンスを改善することもできます。

古いブラウザでHTTP/2を使用できますか？

ほとんどの最新のブラウザはHTTP/2をサポートしていますが、古いブラウザはそうではないかもしれません。クライアントがHTTP/2をサポートしていない場合、サーバーは通常、HTTP/1の使用に戻ります。 HTTP/2には多くの利点がありますが、優れたコーディングプラクティスに代わるものではなく、より広範なパフォーマンス戦略の一部として使用する必要があることに注意してください。

私のウェブサイトがHTTP/2を使用しているかどうかを確認する方法は？

HTTP/2テストなど、WebサイトがHTTP/2を使用しているかどうかを確認するオンラインツールがいくつかあります。また、ブラウザ開発者ツールでネットワークプロトコルをチェックして手動で確認することもできます。ウェブサイトがHTTP/2を使用していない場合は、サーバーソフトウェアまたは構成を更新する必要がある場合があります。

以上がファイルバンドリングとhttp/2：ベストプラクティスの再考の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。