Is it better to minify javascript into a single bundle for the whole site, or a specific-to-each-page bundle?

Question

When minifying JavaScripts together in web-development, is it better from the user-loading-time point of view to:

1. make one single big bundle of JavaScript containing all the script, and include this on each page - so each page will probably not need all of it, but once the user has it cached, they don't need to get any further scripts (until it expires from their cache, of course) - optimising for number-of-requests
2. make one bundle of JavaScript per page, so that each page loads just the script that it needs and nothing else - so each page when first loaded will definitely require a JS request (but still subsequently have that cached. Optimising for size-of-requests.

I'm interested in some data upon which to base the decision for which strategy to go with. I can arrive at conclusions based on anecdote as easily as everyone else :-)

Answer 1

I would much rather have 1 minified js file for the entire site. Over a period of time this always performs better than having multiple js files.

Check out this link for more details

Answer 2

It really depends on the sizes and functions of the script. It's common to have a single master.js for all your pages, which contains all the functionality required by every page of your site, whilst having other js files for functionality that might only be needed on certain pages.

Take Stack Overflow, for instance. They have a master.js file included on every page of the site, but when you visit a question page or the "ask a question" page you'll notice wmd.js. This script includes all the functionality for the editor which is needed on fewer pages.

Answer 3

It depends entirely on what's in your scripts. If you've got loads of small functions which are used by a wide selection of pages then yes, a single file will be best. If you've got a large script that's only used by one page, you wouldn't typically want to slow down the initial front-page load time by including it in the shared script.

So what you will typically end up with is a compromise, with base functions shared across all pages in one script, and the more complex and specific functions in per-page or per-page-group scripts. It'll very rarely be beneficial to go the whole option-2 hog and have a completely separate script for each page.

Having shared functions in one file and separate page-specific complex scripts is also typically more maintainable.