webpack & HTTP/2

• 原文地址：webpack & HTTP/2
• 原文做者：Tobias Koppers
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：薛定諤的貓
• 校對者：perseveringman、HydeSong

webpack & HTTP/2

讓咱們從 HTTP/2 的一個傳言開始：

有了 HTTP/2，你就再也不須要打包模塊了。

HTTP/2 能夠多路複用，全部模塊均可以並行使用同一個鏈接，所以多個請求再也不須要多餘的往返開銷。每一個模塊均可以獨立緩存。

很遺憾，現實並不如意。

之前的文章

下面的文章詳細解釋了相關信息，而且作了一些實驗來驗證。你能夠閱讀它們（或者跳過它們，只看總結）。

Forgo JS packaging? Not so fast The traditional advice for web developers is to bundle the JavaScript files used by their webpages into one or (at most…engineering.khanacademy.org

The Right Way to Bundle Your Assets for Faster Sites over HTTP/2 Speed is always a priority in web development. With the introduction of HTTP/2, we can have increased performance for a…medium.com

文章主旨：

• 相比拼接爲一個文件，多個文件傳輸仍然有 協議開銷（protocol overhead）。
• 相比多個小文件，單文件方式對壓縮更友好。
• 相比處理單個大文件，服務器處理多個小文件較慢。

所以咱們須要在二者中間取得一個折中。咱們將模塊分爲 n 個包，n 大於 1，小於模塊數。改變其中一個模塊使其緩存失效，由於相應的包只是整個應用的一部分，其它的包的緩存仍然有效。

更多的包意味着緩存命中率更高，但不利於壓縮。

AggressiveSplittingPlugin

webpack 2 爲你提供了這樣的工具。webpack 內部大多都是這樣，將一組模塊組裝成塊（chunk）輸出一個文件。咱們還有一個優化階段能夠改變這些塊（chunk），只是須要一個插件來作這個優化。

插件 AggressiveSplittingPlugin 將原始的塊分的更小。你能夠指定你想要的塊大小。它提升了緩存，但不利於壓縮（對 HTTP/1 來講也影響傳輸時間）。

爲告終合類似的模塊，它們在分離以前會按照路徑的字母順序排序。一般在同一目錄下的文件每每是相關的，從壓縮來看也是同樣。經過這種排序，它們也就能分離到相同的塊中了。

對於 HTTP/2 咱們如今有高效的分塊方式了。

修改應用

但這還沒結束。當應用更新時咱們要儘可能複用以前建立的塊。所以每次 AggressiveSplittingPlugin 都可以找到一個合適的塊大小（在限制內），並將塊的模塊（modules）和哈希（hash）保存到 records 中。

Records 是 webpack 編譯過程當中編譯狀態的概念，能夠經過 JSON 文件存取。

當再次調用 AggressiveSplittingPlugin，在嘗試分離剩餘模塊以前，它會先嚐試從 records 中恢復塊。這就確保已緩存的塊可以被複用。

啓動和服務（Bootstrapping and Server）

使用這項技術的應用再也不輸出包含在 HTML 文件中的單獨文件，相反，它輸出多個須要被加載的塊（chunk），應用就能使用多個 script 標籤（並行）加載每一個塊。就像這樣：

<script src="1ea296932eacbe248905.js"></script>
<script src="0b3a074667143853404c.js"></script>
<script src="0dd8c061aff2a2791815.js"></script>
<script src="191b812fa5f7504151f7.js"></script>
<script src="08702f45497539ef6ea6.js"></script>
<script src="195c9326275620b0e9c2.js"></script>
<script src="19817b3a0378aedb2143.js"></script>
<script src="0e7a65e649387d773247.js"></script>
<script src="13167c9702de79d2f4fd.js"></script>
<script src="1154be40ff0e8dd16e9f.js"></script>
<script src="129ce3c198a25d9ace74.js"></script>
<script src="032d1fc9a213dfaf2c79.js"></script>
<script src="07df084bbafc95c1df47.js"></script>
<script src="15c45a570bb174ae448e.js"></script>
<script src="02099ada43bbf02a9f73.js"></script>
<script src="17bc99aaed6b9a23da78.js"></script>
<script src="02d127598b1c99dcd2d0.js"></script>複製代碼

webpack按時間前後順序輸出這些塊。最舊的文件先執行，最新的在最後。瀏覽器能夠先執行已被緩存的塊，同時加載最新的文件 -- 舊文件更可能已經被緩存。

當 HTML 文件被請求時，HTTP/2 服務端推送能夠將這些塊推送給客戶端。也是由於舊文件更可能已經被緩存，最好能先推送最新的文件。若是已經有緩存，客戶端能夠取消服務端的推送，但這須要一次往返。

webpack 將代碼分離用於 按需加載，能夠處理並行請求。

結論

webpack 2 爲你提供了用於 HTTP/2 的，能改善緩存和傳輸的工具。不用擔憂你的技術棧不面向將來了。

注意 AggressiveSplittingPlugin 仍然是實驗特性。

我對你的使用體驗很感興趣哦~

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、React、前端、後端、產品、設計 等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。