29 Jun 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‍ 

Manish Goyal

Manish Goyal

Computer Science
29 Jun 2018

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


Prasad Ajinkya

Prasad Ajinkya

Computer Science
12 Feb 2019

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?

12 Feb 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. 

Prasad Ajinkya

Prasad Ajinkya

Computer Science
13 Feb 2019
13 Feb 2019

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

Prasad Ajinkya

Prasad Ajinkya

Computer Science
13 Feb 2019

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. 

13 Feb 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 -

Only logged in users can reply.