Load multiple javascripts as needed vs loading one big file once

Question

Is it better to write one big javascript file with the behavior for all the pages of the site at once? Or to only load the javascript specific to that page?

I understand that one big file is better for caching. However I am thinking that the browser will probably run all kind of unnecessary code (jQuery on "ready" stuff and attaching events) to pages that don't require them.

I also understand that fewer HTTP requests is better. So we have 3 scenarios that I see:

1. One big file across the entire site
2. Load modules as needed
3. One combined file specific to each page, generated on the fly as a combination of needed modules.

What's best?

I have the Yii Framework, if it helps.

Answer 1

You are right with your thoughts - a big file is generelly preferred, but this can lead to unwanted Javascript parts to be executed. Your goal must be to separate the generally needed Javascript files with the parts that are only needed for one page. You can then decide for every case if you want to include it in your big file or if you want to continue to load it separately. Try to identify the main pages that most of your users visit - the files needed there should go in the main file.

As a sidenote, you can have a look at Require.js for building module relations in Javascript and on-demand loading.