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: #-Link-Snipped-#‍ , #-Link-Snipped-#‍ 

Replies

  • Manish Goyal
    Manish Goyal

    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

    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

    Thank you, #-Link-Snipped-# . 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
  • Kaustubh Katdare
    Kaustubh Katdare

    #-Link-Snipped-# - CE's already HTTP/2 enable. Wondering if NGINX+PageSpeed would be useful. 

  • Prasad Ajinkya
    Prasad Ajinkya

    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

    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.  

You are reading an archived discussion.

Related Posts

i am very confused related to choose the project topic i want to continue my project in android or PHP which one is better and most important which topic i...
What are the steps to change email ID after registering in TCS NextStep portal?