Optimal Way to Combine JS Files Across Site

Question

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!

Answer 1

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.