webpack & HTTP/2

喜欢ヅ旅行 2021-09-18 08:10 238阅读 0赞

>  *  原文地址：[webpack & HTTP/2][webpack _ HTTP_2]
>  *  原文作者：[Tobias Koppers][]
>  *  译文出自：[掘金翻译计划][Link 1]
>  *  本文永久链接：[github.com/xitu/gold-m…][github.com_xitu_gold-m]
>  *  译者：[薛定谔的猫][Link 2]
>  *  校对者：[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][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][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 标签（并行）加载每个块。就像这样：

webpack按时间**先后顺序**输出这些块。最旧的文件先执行，最新的在最后。浏览器可以先执行已被缓存的块，同时加载最新的文件 -- 旧文件更可能已经被缓存。

当 HTML 文件被请求时，**HTTP/2 服务端推送**可以将这些块推送给客户端。也是因为旧文件更可能已经被缓存，最好能先推送最新的文件。如果已经有缓存，客户端可以取消服务端的推送，但这需要一次往返。

webpack 将代码分离用于 **按需加载**，可以处理并行请求。

## 结论 ##

webpack 2 为你提供了用于 HTTP/2 的，能改善缓存和传输的工具。不用担心你的技术栈不面向未来了。

注意 *AggressiveSplittingPlugin* 仍然是**实验特性**。

我对你的使用体验很感兴趣哦~

--------------------

> [掘金翻译计划][Link 1] 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金][Link 3] 上的英文分享文章。内容覆盖 [Android][]、[iOS][]、[React][]、[前端][Link 4]、[后端][Link 5]、[产品][Link 6]、[设计][Link 7] 等领域，想要查看更多优质译文请持续关注 [掘金翻译计划][Link 1]、[官方微博][Link 8]、[知乎专栏][Link 9]。

[webpack _ HTTP_2]: https://link.juejin.im?target=https%3A%2F%2Fmedium.com%2Fwebpack%2Fwebpack-http-2-7083ec3f3ce6
[Tobias Koppers]: https://link.juejin.im?target=https%3A%2F%2Fmedium.com%2F%40sokra%3Fsource%3Dpost_header_lockup
[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fxitu%2Fgold-miner
[github.com_xitu_gold-m]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fxitu%2Fgold-miner%2Fblob%2Fmaster%2FTODO%2Fwebpack-http-2.md
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FAladdin-ADD
[perseveringman]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fperseveringman
[HydeSong]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FHydeSong
[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]: https://link.juejin.im?target=http%3A%2F%2Fengineering.khanacademy.org%2Fposts%2Fjs-packaging-http2.htm
[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]: https://link.juejin.im?target=https%3A%2F%2Fmedium.com%2F%40asyncmax%2Fthe-right-way-to-bundle-your-assets-for-faster-sites-over-http-2-437c37efe3ff
[Link 3]: https://juejin.im
[Android]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fxitu%2Fgold-miner%23android
[iOS]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fxitu%2Fgold-miner%23ios
[React]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fxitu%2Fgold-miner%23react
[Link 4]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fxitu%2Fgold-miner%23%E5%89%8D%E7%AB%AF
[Link 5]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fxitu%2Fgold-miner%23%E5%90%8E%E7%AB%AF
[Link 6]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fxitu%2Fgold-miner%23%E4%BA%A7%E5%93%81
[Link 7]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fxitu%2Fgold-miner%23%E8%AE%BE%E8%AE%A1
[Link 8]: https://link.juejin.im?target=http%3A%2F%2Fweibo.com%2Fjuejinfanyi
[Link 9]: https://link.juejin.im?target=https%3A%2F%2Fzhuanlan.zhihu.com%2Fjuejinfanyi