We're working on a CMS which will allow third party developers to create extensions for the system (modules). We want to allow developers the use of the pre-installed jQuery JS library and the various elements of the new jQuery UI library (and other popular JS libraries) for their animated, Ajax driven admin panels.

To keep the JS loading time as small as possible the developer will specify which elements of the UI library they will need (see the download builder), and the system will then output only the JS their module really needs. And if more than one module needs the same JS the system won't load it twice.

Now my question is this...

Should we load a separate JS file for each UI element, eg:

jqueryui-draggable.js
jqueryui-sortable.js

A local cache of them can be stored, but there are more HTTP requests as certain pages may need quite a few different elements.

Or should we combine these and pack them dynamically using PHP, into one JS file - which makes a smaller filesize and less HTTP requests, but no cache because the content will change.

I just need to weigh up which is quicker!

What are your thoughts? Any useful research you know of?

I would combine all of the files into one, or you take a look at Google's Ajax Libraries, which has the major libraries hosted and packed and gzipped.