CrazyEngineers
CrazyEngineers

  • One big JS file OR multiple smaller JS files - What's better for users?

    Kaustubh Katdare

    Administrator

    Updated: Oct 26, 2024
    Views: 2.6K

    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-#‍ 

    0
    Replies
Howdy guest!
Dear guest, you must be logged-in to participate on CrazyEngineers. We would love to have you as a member of our community. Consider creating an account or login.
Replies

  • Manish Goyal

    Member • Jun 28, 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


    Are you sure? This action cannot be undone.
    Cancel

  • Prasad Ajinkya

    Member • Feb 12, 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?

    Are you sure? This action cannot be undone.
    Cancel

  • Kaustubh Katdare

    Administrator • Feb 12, 2019

    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. 

    Are you sure? This action cannot be undone.
    Cancel

  • Prasad Ajinkya

    Member • Feb 13, 2019

    An overkill, but read about this - <a href="https://www.tunetheweb.com/performance/http2/http2-push/" target="_blank" rel="nofollow noopener noreferrer">Using HTTP/2 Push on Apache to improve your performance | Tune The Web</a>

    Are you sure? This action cannot be undone.
    Cancel

  • Kaustubh Katdare

    Administrator • Feb 13, 2019

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

    Are you sure? This action cannot be undone.
    Cancel

  • Prasad Ajinkya

    Member • Feb 13, 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. 

    Are you sure? This action cannot be undone.
    Cancel

  • Kaustubh Katdare

    Administrator • 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.  

    Are you sure? This action cannot be undone.
    Cancel
Home Channels Search Login Register