The dillema is like this:
If I try to fit all the scripts blocks on the masterpage (include page in some frameworks), every page gets a copy of every script (including the ones they don't need) and these quickly adds up and bloats the page size.
If I include/insert script blocks where needed, javascript will be spread all over the project.
I am struggling with where to keep the right balance. Anyone?
Including all JS files isn't a major problem (unless they have slow code running on loading), and won't bloat the page that much: once they are loaded, the browser will cache them anyway, so it will result in 0 load time on next pages.
As long as you don't put the content of the JS files in the page itself, of course! :-)
If bloating your page size is a concern, then perhaps you should move your Javascript out to a separate js file (or even multiple) that are referenced by the pages that need it. This does mean you'll have more HTTP requests for first time visitors, but it makes it possible for the browser to cache the Javascript so that it doesn't need to fetch it again for every page on your site.
its not that big of an issue if you minify your scripts, something as big as jquery is about 50k after minification.
I would extract as much JavaScript as possible to external .js files. Include the most commonly used libraries in the masterpage, but if any individual page needs JavaScript specific to that page, I'd suggest loading it only on that page. Keep a cross-reference of which .js files are loaded by which pages, and if you see a library being referenced by a lot of pages, move it to the masterpage.
Be sure to compress/minify all of your external JavaScript libraries using something like the YUI Compressor or some other tool mentioned in What do you use to minimize and compress JavaScript libraries?.
We minify, merge and gzip our site wide JS (which is actually about 17 files merged down into two files, one for all our code and one for library code like mootools and clientcide). This greatly reduces the time it takes to download the scripts. Compression and merging are done and the fly and cached on the server so development is not slowed at all. Our total JS for the sitewide goodies is about 50K once all compressed up as above.
We also set a long expires time on the files, which all have a version number so when we make a change we up the version number (we have a sitewide one to make it easy) and users are forced to get a fresh version and once downloaded they are cached by the browser.
Additionally to that we have made the move to put our JS at the footer of the page, this allows everything to render out much faster and gives the user something to look at while we download the JS.
Some individual pages have one off scripts that they need (search forms, etc.) these get the same treatment as above (ie all the files needed would be merged, minified, gzipped) but the sitewide code is left as is so we can make use of the caching. So in this instance we could down load 3 JS files, sitewide, library and custom code for that page(s).