将Webpack与HTTP/2一起使用的价值是什么 [英] What is the value of using Webpack with HTTP/2

问题描述

我正在开始一个新项目，并且正在努力向前思考.我过去曾经使用过Browserify.对于我的新项目，我想使用Webpack，Rollup或SystemJS.到目前为止，Webpack看起来是最成熟的，具有许多令人敬畏的功能.

I'm starting a new project and I'm trying to be forward thinking about it. I've used Browserify in the past. For my new project I would like to use either Webpack, Rollup, or SystemJS. Webpack looks by far to be the most mature with tons of awesome features.

不过，我担心Webpack与使用HTTP/2的一两年无关.所以我想知道，Webpack对于通过HTTP/2提供服务的网站有什么价值?我不是要寻求意见，而是要对将Webpack与HTTP/2结合使用的好处进行事实说明.如果没有收益或收益很小，那也将对我的决定有所帮助.

I'm concerned, though, that Webpack is going to be irrelevant in a year or two with the adoption of HTTP/2. So I'm wondering, what value does Webpack offer for a site being served over HTTP/2? I'm not looking for an opinion, but a factual explanation of the benefits of using Webpack with HTTP/2. If there are no benefits, or very little benefits, that would also help me with my decision.

推荐答案

TL; DR

在HTTP/1.1中，必须获得尽可能少的请求才能获得性能.在HTTP/2中，您对每个请求的性能影响最小，但是仍然会遇到资源约束和依赖管理，这将需要捆绑工具(例如webpack).

In HTTP/1.1, you had to make as few requests as possible to get performance; in HTTP/2 you have minimal performance impact per request but can still hit resource constraints and dependency management that will require a bundling tool such as webpack.

长版:

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

Webpack (or any other bundler) can still provide value in an HTTP/2 world because while HTTP/2 allows multiplexed, asynchronous, simultaneous queries from the client to the server, it doesn't mean that the actual server you're connecting to has unlimited capacity to process them or will even allow them.

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

In the SETTINGS frame sent when you connect, most servers will restrict the number of concurrent streams to a reasonable value such as 100. This means you can not issue more than 100 concurrent requests, which is an issue if you have for example a large unbundled React app with hundreds of js files.

此外，在许多情况下，您在javascript文件之间具有传递性依赖关系，并且如果不捆绑所有依赖关系，则将需要许多请求往返，因为浏览器仅在收到先前的响应时才发现依赖关系，否定HTTP/2的好处. (或者，服务器也许能够自动推送依赖关系，但这会带来一系列其他问题).

Furthermore, in many cases, you have transitive dependencies between javascript files and if you don't bundle all the dependencies, you'll need many request round-trips as the browser will only discover dependencies when it receives the previous responses, negating HTTP/2 benefits. (Alternatively the server may be able to push automatically the dependencies but this creates a whole other set of issues).

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

For these reasons, it makes sense to use webpack to package a number of homogeneous bundles to make sure your maximum concurrent requests stay below the server limits while keeping your bundle granular enough to leverage efficient browser caching.

这篇关于将Webpack与HTTP/2一起使用的价值是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！