文件捆綁和http/2：重新思考最佳實踐

歡迎訂閱我們的最新JavaScript通訊，點擊此處訂閱

如今幾乎所有JavaScript應用程序都使用構建流程。即使您沒有從ES2015或TypeScript進行轉譯，對代碼進行某種形式的連接和壓縮處理也已成為標準實踐。原因是發出HTTP請求涉及相當大的開銷。服務較少、較大的文件比服務許多較小的文件效率更高。隨著網絡底層協議HTTP/2的下一版本的採用，或許是時候重新考慮最佳實踐了。

HTTP/2基於谷歌的SPDY協議，該協議旨在改進頁面加載延遲並在現有HTTP 1.1標準的基礎上提高安全性。這項新協議的工作始於2012年，第一個開發版本是SPDY的直接副本。最終標準於2015年5月發布，今年5月，谷歌宣布他們將不再在Chrome中支持SPDY。

HTTP/2與其前身有何不同？一個主要區別在於HTTP/2是二進制協議，而不是基於文本的協議。這使其更緊湊、解析效率更高且不易出錯。該協議的一個關鍵優勢在於它是多路復用的，這意味著可以在單個連接上傳輸多個文件。另一個廣為宣傳的功能是服務器推送，它允許服務器在客戶端請求之前將資源傳輸到客戶端，預先填充緩存。

對新協議的支持非常好，包括所有主流瀏覽器。在服務器端，Apache2、Nginx和Microsoft IIS都支持它，Node.js 5.0及以上版本也支持它。大多數瀏覽器廠商都表示他們只會在TLS連接上支持HTTP/2，不過隨著Let’s Encrypt提供免費SSL證書的出現，這是一個很容易滿足的要求。根據W3Techs今年6月收集的數據，大約8.4%的排名前1000萬的網站現在支持這項新協議。如果您是Chrome用戶，您可以使用HTTP/2和SPDY指示器擴展程序，以便一目了然地了解您訪問的哪些網站通過HTTP/2提供服務。

HTTP/2的採用對JavaScript開發人員意味著什麼？我們目前將多個文件連接成捆綁包的做法使得瀏覽器難以有效地緩存我們的代碼：更改一個模塊中的一行代碼需要重新下載整個捆綁包文件。由於HTTP/2的多路復用使請求相對便宜，我們可以選擇將代碼拆分成更小的捆綁包，並更好地利用緩存，以確保我們的應用程序有效地利用用戶的帶寬。

但是，如果請求很便宜，我們是否應該完全放棄捆綁？乍一看這似乎很有道理，但HTTP請求的成本並非唯一需要考慮的因素。 Web服務器也限制了它們可以多高效地服務大量文件。隨著JavaScript社區轉向更小、更集中的模塊的激增，在沒有某種捆綁的情況下將這些文件提供給客戶端將不是理想的選擇。最重要的是，將文件組合在一起可以實現更好的壓縮，從而節省帶寬。

那麼，您應該何時考慮切換到HTTP/2？答案是，這取決於情況。儘管瀏覽器支持非常好，但如果您的目標受眾仍然停留在舊版本的IE上，那麼您就運氣不佳了，因此請檢查您的訪問者統計數據，看看這是否可能使大多數用戶受益。我從這一切中得到的啟示是，新協議的支持和採用令人驚訝地進展順利，作為開發人員，這是我們不能忽視的趨勢。

您採用什麼樣的捆綁策略？您是否正在考慮切換到HTTP/2，或者您可能已經切換了？請在評論中告訴我！

關於文件捆綁和HTTP/2的常見問題解答 (FAQs)

HTTP/2相對於HTTP/1的主要優勢是什麼？

HTTP/2相對於HTTP/1具有多個優勢。最顯著的一個優勢是它能夠通過單個TCP連接多路復用多個請求。此功能減少了發出多個請求時可能發生的延遲，從而提高了Web應用程序的整體性能。 HTTP/2還支持標頭壓縮，從而減少了開銷，並且支持服務器推送，允許服務器在客戶端請求之前將資源發送到客戶端。

HTTP/2中的文件捆綁是如何工作的？

在HTTP/2中，文件捆綁不再像在HTTP/1中那樣必要。這是因為HTTP/2可以一次處理單個連接上的多個請求，從而無需將文件捆綁在一起以減少請求數量。相反，可以單獨加載文件，這可以提高緩存利用率並簡化文件管理和更新。

HTTP/2中的多路復用是什麼？

多路復用是HTTP/2的一個關鍵功能，它允許同時通過單個TCP連接發送多個請求和響應。這是對HTTP/1的重大改進，HTTP/1每次連接只能處理一個請求。多路復用減少了與多個請求相關的延遲，從而提高了Web應用程序的性能。

HTTP/2中的服務器推送是如何工作的？

服務器推送是HTTP/2中的一項功能，它允許服務器在客戶端請求之前將資源發送到客戶端。這可以通過減少客戶端接收和呈現資源所需的時間來提高Web應用程序的性能。服務器可以根據初始請求推送它預計客戶端需要的資源。

為什麼在HTTP/2中文件捆綁被認為是不好的做法？

在HTTP/2中，文件捆綁被認為是不好的做法，因為它會消除該協議的一些關鍵優勢。 HTTP/2旨在同時處理單個連接上的多個請求，因此將文件捆綁在一起實際上可能會降低性能，因為它會創建更大、更複雜的文件，這些文件需要更長的時間來處理和更新。

HTTP/2對SEO有什麼影響？

HTTP/2可能會對SEO產生積極影響，因為它可以提高網站的速度和性能。速度更快的網站往往在搜索引擎結果中排名更高，因為頁面加載速度是排名因素。此外，HTTP/2的多路復用和服務器推送等功能可以改善用戶體驗，這也有助於提高SEO。

HTTP/2如何提高安全性？

HTTP/2通過支持使用HTTPS來提高安全性，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，例如HTTP/2測試。您也可以通過檢查瀏覽器開發者工具中的網絡協議來手動檢查。如果您的網站沒有使用HTTP/2，您可能需要更新您的服務器軟件或配置。

以上是文件捆綁和http/2：重新思考最佳實踐的詳細內容。更多資訊請關注PHP中文網其他相關文章！