What is the value of using Webpack with HTTP/2
Asked Answered
A

1

32

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.

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.

Ardellaardelle answered 31/5, 2016 at 21:56 Comment(3)
I find it somewhat humorous that as long as we suffix our requests for opinions with "I want facts" (ostensibly facts about opinions). The "offtopic" patrol leaves it be. Good on you @battmanz, you sly dog!Donn
@ZephyrPellerin Hey, I gotta get my question answered any way I can! :)Ardellaardelle
Hi did you have any update in 2021 ? When I googled it what I found was still the article written in 2016, like medium.com/@asyncmax/…Sinclair
P
24

TL;DR

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.

Long version:

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.

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.

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).

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.

Pigheaded answered 1/6, 2016 at 11:59 Comment(3)
Not to mention webpack 2's AgressiveSplittingPlugin: see medium.com/webpack/webpack-http-2-7083ec3f3ce6#.zdo4juvgoBolshevist
And usage for AgressiveSplittingPlugin github.com/webpack/webpack/tree/master/examples/…Bolshevist
Also worth mentioning filesystems processing sequential reads much faster than random access reads even on SSDs, though probably not an issue if the file is cached in memory.Stelu

© 2022 - 2024 — McMap. All rights reserved.