Optimal Way to Combine JS Files Across Site

I have a website that has pages 1,2,3 and js files A,B,C,D,E开发者_高级运维,X, and Y. The following outlines which files each page includes:

Page 1: A
Page 2: A, B, C, D, E
Page 3, A, B, C, X, Y

Right now, all of these files are sent separately and it takes a while to download them all for the first time. I know that condensing them into a single file reduces transfer time, so that is my plan. But in this case, I don't want to condense them all into one file because page 3 can benefit from page 2 by already having A, B, and C cached (which wouldn't be possible if there was a big ABCDE file and a big ABCXY file). And yes, users will switch between 2 and 3 in typical use.

But the answer here is not necessary just "make an ABC file, a DE file, and an XY file and be done" because the situation I have described is only part of a bigger problem.

How do people usually deal with combining JS files across a website, where some pages share some files?

Note1: all of the files are on the order of a couple hundred to low thousands of lines.

Note: If you cannot answer the question due to lack of some detail, please explain why that detail matters and then how it could change your answer!

---

my first thaught was to minify the javascript files, is that an option? this may solve your concern of loading several files; How are you loading the files, is it part of a template?

new edit: on topic, I usually also try to keep the files in one big javascript, but most of the times it's very difficult, so I minify as possible or even use compression on the server.

---

I have the same situation in my project, dozens of common scripts, and each page has its own additional set. I go with that option:

Page 1: A
Page 2: ABC, DE
Page 3: ABC, XY

Yes, it would be probably better to have ABCDE and then you have one http request, but this will make support a bit trickier (need to remember to add new common script to all pages), so do not do it until you really see that your server suffers from number of requests. Premature optimization is evil!

Another issue: browser can load 2 script files from one domain simultaneously (some of new browsers even enhanced that number), so client side won't be blocked waiting scripts to be loaded. So going with this approach should not be a problem and you still can maintain it in easy way.

Also you can think about library which can automate it. For Java you can take a look at Jawr, I don't know what your server side is, so just have a look at its possibilities and find something similar for your environment.

ADD-ON: just one issues pop up, with help of Jawr we can use 'debug' mode, which means that all files will be sent separately and this is good for development. In production we set jawr.debug.on = false and it uses bundles.

In other words, while developing application:

Page 1: A
Page 2: A, B, C, D, E
Page 3: A, B, C, X, Y

in production we use ABC... this is done just changing jawr configuration and imho this is the best way to go. If you use java, you can spend some time playing with it, otherwise it is really worth to find similar framework/library.