将 Webpack 与 HTTP/2 一起使用有啥价值

Posted 2023-03-10

【中文标题】将 Webpack 与 HTTP/2 一起使用有啥价值

【英文标题】：What is the value of using Webpack with HTTP/2将 Webpack 与 HTTP/2 一起使用有什么价值

【发布时间】：2016-09-30 02:10:51

【问题描述】：

我正在开始一个新项目，我正在努力向前思考。我过去使用过 Browserify。对于我的新项目，我想使用 Webpack、Rollup 或 SystemJS。 Webpack 看起来是迄今为止最成熟的，拥有大量令人敬畏的功能。

不过，我担心 Webpack 将在一两年内与 HTTP/2 的采用无关。所以我想知道，Webpack 为通过 HTTP/2 提供服务的网站提供什么价值？我不是在寻找意见，而是对使用 Webpack 和 HTTP/2 的好处的事实解释。如果没有好处，或者好处很少，那也会帮助我做出决定。

【问题讨论】：

我觉得这有点幽默，只要我们在我们的意见请求后加上“我想要事实”（表面上是关于意见的事实）。 “离题”巡逻不理会它。你好@battmanz，你这个狡猾的狗！

@ZephyrPellerin 嘿，我必须尽我所能回答我的问题！ :)

您好，您在 2021 年有什么更新吗？ google了一下发现还是2016年写的文章，比如medium.com/@asyncmax/…

【参考方案1】：

TL;DR

在 HTTP/1.1 中，您必须发出尽可能少的请求才能获得性能；在 HTTP/2 中，您对每个请求的性能影响最小，但仍然会遇到资源限制和依赖管理，这需要 webpack 等捆绑工具。

加长版：

Webpack（或任何其他捆绑程序）仍然可以在 HTTP/2 世界中提供价值，因为虽然 HTTP/2 允许从客户端到服务器的多路复用、异步、同时查询，但这并不意味着您的实际服务器'重新连接到有无限的能力来处理它们，甚至允许它们。

在您连接时发送的 SETTINGS 帧中，大多数服务器会将并发流的数量限制为合理的值，例如 100。这意味着您不能发出超过 100 个并发请求，例如一个包含数百个 js 文件的大型非捆绑 React 应用程序。

此外，在许多情况下，您在 javascript 文件之间存在传递依赖关系，如果您不捆绑所有依赖关系，您将需要多次请求往返，因为浏览器只会在收到之前的响应时发现依赖关系，否定 HTTP/2 的好处。 （或者，服务器可能能够自动推送依赖项，但这会产生一系列其他问题）。

出于这些原因，使用 webpack 打包多个同构包是有意义的，以确保您的最大并发请求数保持在服务器限制以下，同时保持包的粒度足以利用有效的浏览器缓存。

【讨论】：

更不用说 webpack 2 的 AgressiveSplittingPlugin：见 medium.com/webpack/webpack-http-2-7083ec3f3ce6#.zdo4juvgo

以及 AgressiveSplittingPlugin github.com/webpack/webpack/tree/master/examples/…的用法