Javascript - To combine or not combine, that is the question.

Question

Ok, so I know that it's obvious to combine all of a pages Javascript into a single external file for efficiency purposes, but that's not quite the question here.

Say I have Default.htm with a search field that has a little Javascript magic attached to it. Then I have Contact.htm with a contact form that has some Javascript magic attached to it. And finally I have a FAQ.htm with some jQuery panels showing the answers... you get the picture.

Basically I have three pages that all have "some" javascript need, but none of the Javascript is used on any other pages.

Is it better to combine all of that Javascript into one big minified file that loads once and is then stored in Cache, or is it better to use an individual Javascript file on the Default page, but not use it on the Contact page... etc?

What works best in this scenario?

Option: 1

Default.htm
jquery.js
default.js

Contact.htm
jquery.js
contact.js

Faq.htm
jquery.js
faq.js

Option: 2

Default.htm
jquery-default-contact-faq-min.js

Contact.htm
jquery-default-contact-faq-min.js

Faq.htm
jquery-default-contact-faq-min.js

PS: for all you asp.net guys, I'm using Combres to Combine, Minify, and Version my Javascript files

Answer 1

combine into 1 file. let it get cached. it loads once on any page, and for any subsequent pages it can use the cached copy.

Answer 2

It is always an act of balancing the number of HTTP requests and limiting the transferred bytes that are not really needed yet.

There are three possibilities:

1. combine everything in 1 file
2. have three separate files, and load them as needed
3. have three separate files, load the one needed for that page right away and preload the others (when the time is right)

You will only know what is best for your situation by doing some A-B load testing.

Everything depends on the size of the transferred data, the overlap of needed functionality and the probability that some functionality is needed.

Answer 3

Because it doesn't sound like there's a lot of javascript, combining it into one file would be better. Only if there's significant amounts of javascript that doesn't need to be loaded if a user doesn't visit a page then you would consider keeping the files separate.

Answer 4

If the combined file is under say, 25kb minified, then go for it. But if it is more than that, I'd say, identify the one that is the biggest of them, and let that one js file be separate. Combine the rest. That 25kb limit thingy too is not a hard rule, it is up to you.

If your individual files are in the magnitude of say, 30kb, I'd recommend not combining them, and letting the individual js files be cached as individual js files.

Hope that helps.

Answer 5

I would definitely vote to combine them. If you are concerned about parse or setup time for the "not used" Javascript, then I would recommend structuring your Javascript with each file in a closure, and then run the closures you need on the pages you need them. For example:

// File 1
window.closures = window.closures || {}
window.closures["page1"] = (function() {
  // Javascript for Page 1
});

// File 2
window.closures = window.closures || {}
window.closures["page2"] = (function() {
  // Javascript for Page 2
});    

// File 3
window.closures = window.closures || {}
window.closures["page2"] = (function() {
  // Javascript for Page 2
});

Then, in your page:

<!-- This one combined.js file will be downloaded once and cached //-->
<script type="text/javascript" src="combined.js"></script>
<script>
  // Run the Javascript in your combined.js intended for page2
  window.closures["page2"]()
</script>