I'm interested in hearing opinions on how to efficiently organise JavaScript (and jQuery) in a largish web application project that could potentially see high traffic.

Things that concern me are:

* Being efficient on the server
* Being efficient on the browser
* Keeping the codebase manageable

Lets assume that all authored JavaScript is kept in one massive `application.js` file which in turn is concatenated together with all external libraries into one single js file that the server has to deliver. This should be most efficient on the server as it only has to serve it up once and then the browser will cache it for each subsequent page load.

Contained within it are lots of custom jQuery functions hooked to selectors like this:

```
$('#my_unique_selector').bellsAndWhistlesPlugin();

```

Where the above selector is only present on a few pages, using the methods of serving everything in one bundle means that every page load the browser has to both parse the plugin code (that isn't going to be used), and then interpret the `bellsAndWhistlesPlugin()` method, even though the selector doesn't find a match.

So I guess my question is, at what point does this approach become inefficient? Is there and argument for splitting up the JavaScript and only serving up the bits that are required for each page? Or am I worrying about nothing - browsers are more than capable of dealing with loads of redundant code?