One big JS file OR multiple smaller JS files - What's better for users?
I'm faced with a situation where I've to decide whether to include multiple JS files (minified and compressed) Vs packing them all together in a single compressed and minified JS file.
The obvious answer is to have single compressed JS file so that we drastically reduce the number of HTTP requests made to the server. But there's a problem with that approach.
In my situation, we've jQuery as the 'base' file that's required everywhere. Then my custom JS forms the rest 20% of the code. If I combine everything into just one file - and change even 1 character in it - the users will have to re-download the entire JS file (99.99% of the unchanged code) again.
If I split the files, users will have to download only the smaller file that has been updated.
Have you faced similar situation? What's your recommended approach?
You can merge all the third party files that are normally unchanged into one file and have all your custom code in one file say custom.js
If its payloads you are concerned with, what Manish is saying is correct. If you have multiple such base files, think of using http2 push for including them everywhere.
I am assuming you are using webpack to do smarter bundling?
Thank you, @Prasad Ajinkya . I'm using Webpack already and it does a great job of minifying things. Since this question, I've found out that having one file instead of multiple small files is a better approach. It reduces time in hitting DNS for every new file. At least that's what Google's LightHouse plugin suggests.
An overkill, but read about this - https://www.tunetheweb.com/performance/http2/http2-push/
Please read through the link, are you pushing the common JS and CSS files? I doubt that.
PS - I knew you are http2 enabled, saw that in the dev console.
Ok, we aren't pushing the files. Right now, we're focused on reducing the node count of our HTML and overall reduction in CSS + HTML. However, I'm going to add this to the list of optimizations.