different small js files per page VS. 1x site-wide js file?

Question

Different pages of my site have different js needs (plugins mainly), some need a lightbox, some dont, some need a carousel, some dont etc.

With regards to pageloading speed should i

option 1 - reference each js file when it is needed:

so one page might have:

<script type="text/javascript" src="js/carousel/scrollable.js"></script>    
<script type="text/javascript" src="js/jquery.easydrag.js"></script>
<script type="text/javascript" src="js/colorbox/jquery.colorbox-min.js"></script>

and another have:

<script type="text/javascript" src="st_wd_assets/js/carousel/scrollable.js"></script>   
<script type="text/javascript" src="st_wd_assets/js/typewatch.js"></script>

option 2 - combine and compress into one site_wide.js file:

so each page would reference:

<script type="text/javascript" src="js/site_wide.js"></script>

there would be unused selectors/event listeners though, how bad is this? I would include any plugin notes/accreditations at the top of the site_wide.js file

Answer 1

It's usually best to combine these and serve one file, which you set the cache headers so that the client holds onto it, not requesting it each page. Remember that if a jQuery selector doesn't find anything, it doesn't do anything so that's not a major deal as long as you're using a good portion of your script each page, it's just fine that it has selectors without matches.

Make sure it's being cached by the client though, of all your work is for naught. Also make sure it's served minified and gzipped. And last, look at hosting your main libraries from a CDN.