Hi guys!! Hope you've been well!

Recently I wrote a small explanation in English to my fellow man, therefore it's an informal setting, but I'm not sure about articles and grammar overall! Also, it's a tad specific due to the professional field, but I hope it wouldn't be a hindrance. Thus I'd be very grateful for helping me out! Tons of thanks in advance!

And yeah, I kinda have a feeling that I overuse transitions, so bear with me please!)

Here we go:

Well) Not exactly) Even though HTTP2 allows u to create manifold requests simultaneously to the server u still have a limited bandwidth, thus a minification process still holds the place but of course it can be done by gulp. But we still have a concern for the size we ship to a client. 

We have few options to optimize user's experience in that regard, the first one is caching; e.g on my current project we have:
polyfills.js for polyfills because we should kick in its code before any vendor code is initialized, obviously cause they may depend on it;
vendor.js for side libs;
rent.js in case u have multiple domains which share some common logic;
main.js;

So, initially, the browser can't really cache them since they will have the same name each time u change something in your codebase. But it doesn't make sense for all the files, cause some of them you change less frequently than the others, here steps in a webpack's precious ability to put hashes to bundle's names judging on their change status. i.e the rent.[hash].js bundle has some new code since the previous bundling so webpack will update the hash value in the name, at the same time we didn't add any new libs to our project, therefore vendor.[hash].js hash stays intact. Hence, this allows the browser to cache the artifacts between production builds, so the next time it will download the only new rent.js file and will get vendor.js from the cache since the names are the same in the cache and in the server.

Okay, and still your main.js file can be HUUGE) in case it's some SAAS application, but not all users are gonna use the whole application entirely, e.g an administration section it doesn't make sense to ship the section to the user for the obvious reason. 
To deal with it webpack has a feature which allows to chunkify your code, of course adding hashes at the same moment. So the browser will download a necessary code upon the user's request to a part of the site, not with the first batch forcing the user to wait while your HUGE application is downloaded) 

This is pretty big two advantages which virtually work out of the box)

====

Gosh)) I have never written so much text in my life in English 😆

====

Do u see the blue dots on the screenshot? Currently, we have two sections (external and legal) in the app the code of which is separated from the main bundle by chunkification) As of details, obviously docs will do the job))

====

Yeah. webpack does all the routine) including index.html compilation)

Well, no, for downloading chunks u don't need to include them into the index.html; Angular can request modules lazily) Like we do on the picture below manually to download some heavy lib upon the user's navigation to the specific page.