Open Holayn opened 3 years ago
problem: webpage has lots of resources: html, css, js, can affect first page load performance
most of the current major browsers limit the number of simultaneous connections per each hostname to six
webpack bundles all js files into one (or few) bundles,
repackages code into more efficient/optimized file
reduce number of round-trips needed for resources
use loaders to bundle html and css as well
plugins to minify, hot module replacement, chunking, code-split, etc
make few reqs as possible for best performance
http1 vs http2 http1: need to make as few reqs as possible for best performance http2: allows simultaneous requests to a server. but server won't necessarily be able to handle so many requests, so still need bundling also transitive dependencies = more round-trips see https://stackoverflow.com/questions/37556283/what-is-the-value-of-using-webpack-with-http-2 so keep number of requests low, keep bundle granular enough for browser caching more bundles = better caching, but less compression webpack plugin for efficient chunking with http2 more reading: https://medium.com/webpack/webpack-http-2-7083ec3f3ce6#.zdo4juvgo
more great reading on bundling: https://engineering.khanacademy.org/posts/js-packaging-http2.htm https://medium.com/@asyncmax/the-right-way-to-bundle-your-assets-for-faster-sites-over-http-2-437c37efe3ff
webpack caching https://webpack.js.org/guides/caching/
webpack codesplitting https://webpack.js.org/guides/code-splitting/
modules in general https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/
lots of npm modules are for node only, so browserify/webpack/other bundlers were needed. today, browsers support es modules, so this reason doesn't really hold anymore, (pro for snowpack) but webpack still useful
Holayn
commented
3 years ago
Bundling
problem: webpage has lots of resources: html, css, js, can affect first page load performance
most of the current major browsers limit the number of simultaneous connections per each hostname to six
webpack bundles all js files into one (or few) bundles,
repackages code into more efficient/optimized file
reduce number of round-trips needed for resources
use loaders to bundle html and css as well
plugins to minify, hot module replacement, chunking, code-split, etc
make few reqs as possible for best performance
http1 vs http2 http1: need to make as few reqs as possible for best performance http2: allows simultaneous requests to a server. but server won't necessarily be able to handle so many requests, so still need bundling also transitive dependencies = more round-trips see https://stackoverflow.com/questions/37556283/what-is-the-value-of-using-webpack-with-http-2 so keep number of requests low, keep bundle granular enough for browser caching more bundles = better caching, but less compression webpack plugin for efficient chunking with http2 more reading: https://medium.com/webpack/webpack-http-2-7083ec3f3ce6#.zdo4juvgo
more great reading on bundling: https://engineering.khanacademy.org/posts/js-packaging-http2.htm https://medium.com/@asyncmax/the-right-way-to-bundle-your-assets-for-faster-sites-over-http-2-437c37efe3ff
webpack caching https://webpack.js.org/guides/caching/
webpack codesplitting https://webpack.js.org/guides/code-splitting/
modules in general https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/
lots of npm modules are for node only, so browserify/webpack/other bundlers were needed. today, browsers support es modules, so this reason doesn't really hold anymore, (pro for snowpack) but webpack still useful