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