View Feed
group-icon
Coffee Room
Discuss anything here - everything that you wish to discuss with fellow engineers.
12920 Members
Join this group to post and comment.
Kaustubh Katdare
Kaustubh Katdare • Jun 29, 2018

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?

Tagging: @Manish‍ , @Prasad‍ 

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?

Kaustubh Katdare
Kaustubh Katdare • Feb 12, 2019

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. 

Kaustubh Katdare
Kaustubh Katdare • Feb 13, 2019

@Prasad Ajinkya - CE's already HTTP/2 enable. Wondering if NGINX+PageSpeed would be useful. 

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. 

Kaustubh Katdare
Kaustubh Katdare • Feb 13, 2019

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.  

Share this content on your social channels -