Minify/Concatenate js/css files when each page brings in a different set of files. How?

Question

so, I understand the process of minifying / concatenating files but if I am not mistaken, please correct, is that there is an assumption of same files per page.

I run a site in which various pages bring in different css and different JS. As such, how can I both minify AND concatenate these files on a per page basis?

I was thinking, on any particular page - minify and bundle the css/js on page request. 1. Backend code reads in the files - css / js. 2. Backend code minifies and concatenates the files, writes these files to a dir. 3. Subsequent requests will use this newly written file.

Of course, the problem arises in that the "homepage" might have site.css and site.js - those might get minified and concatenated with other misc files on that page. NOW, if I go to the "product page"... those files ( site.js and site.css ) will also be there, but now they are paired with "other product page" js / css files. So, it seems that we can't really "create" a new combined file.. as there will be a ton of duplication of same files across the site.

What are you thoughts, gameplan for concatenating/minifying files when each page brings in a different set ( thought can also contain same js/css files ) as other pages?

I've looked into common programs YUI etc.. but they don't seem to address my particular use case.

Answer 1

I'm not sure you need to worry about concatenating every single script on each page since you'll end up having lots of things cached. For example, if you have site.js and site.css minified and they are common on every page, then you don't need to worry about some permutation that includes them in the additional minification and concatenation you proceed to do on each page. Does that make sense?

On the other hand, depending on how big these files are, a potential solution is to minify and concatenate everything for the entire site and send that down once, knowing that the parts that are not used didn't cost that much in additional bandwidth over the cost of making an entirely new request to the server. I'm aware of at least a handful of companies that do this simply because the overall weight of the scripts from page to page isn't significant and they end up needing to make fewer requests from the client, resulting in faster page loads and an easier load on the server.