Qual è il valore dell'utilizzo di Webpack con HTTP/2

Question

Sto avviando un nuovo progetto e sto cercando di essere in grado di pensarci. Ho usato Browserify in passato. Per il mio nuovo progetto mi piacerebbe utilizzare Webpack, Rollup o SystemJS. Webpack sembra di gran lunga il più maturo con tonnellate di fantastiche funzionalità.

Sono preoccupato, tuttavia, che Webpack sarà irrilevante in un anno o due con l'adozione di HTTP/2. Quindi mi chiedo, quale valore offre Webpack per un sito servito su HTTP/2? Non sto cercando un'opinione, ma una spiegazione fattuale dei vantaggi dell'utilizzo di Webpack con HTTP/2. Se non ci sono benefici, o pochissimi benefici, questo mi aiuterebbe anche con la mia decisione.

Answer 1

TL; DR

In HTTP/1.1, si doveva fare il minor numero di richieste possibile per ottenere le prestazioni; in HTTP/2 si ha un impatto minimo sulle prestazioni per richiesta, ma si possono comunque raggiungere vincoli di risorse e gestione delle dipendenze che richiederanno uno strumento di raggruppamento come il webpack.

Versione lunga:

Webpack (o qualsiasi altro bundler) può ancora fornire valore in un mondo HTTP/2 perché mentre HTTP/2 permette multiplex, asincrono, le query simultanee dal client al server, non significa che l'attuale server a cui ti stai collegando ha una capacità illimitata di processarli o addirittura consentirli.

Nel frame SETTINGS inviato quando ci si connette, la maggior parte dei server limiterà il numero di stream simultanei a un valore ragionevole come 100. Ciò significa che non è possibile emettere più di 100 richieste simultanee, che è un problema se si dispone per esempio una grande app React disaggregata con centinaia di file js.

Inoltre, in molti casi, si hanno delle dipendenze transitive tra i file javascript e se non si raggruppano tutte le dipendenze, saranno necessari molti round trip di richiesta poiché il browser scopre solo le dipendenze quando riceve le risposte precedenti , annullando i vantaggi di HTTP/2. (In alternativa, il server potrebbe essere in grado di inviare automaticamente le dipendenze, ma questo crea un'intera serie di problemi).

Per questi motivi, è utile utilizzare webpack per raggruppare un numero di bundle omogenei per assicurarsi che le richieste simultanee massime rimangano al di sotto dei limiti del server mantenendo il bundle sufficientemente granulare per sfruttare l'efficiente caching del browser.