How to combine requests for multiple javascript files into one http request?

Question

This concept is a new one for me -- I first came across it at the YUI dependency configurator. Basically, instead of having multiple requests for many files, the files are chained into one http request to cut down on page load time.

Anyone know how to implement this on a LAMP stack? (I saw a similar question was asked already, but it seems to be ASP specific.

Thanks!

Update: Both answers are helpful...(my rep isn't high enough to comment yet so I'm adding some parting thoughts here). I also came across another blog post with PHP-specific examples that might be useful. David's build answer, though, is making me consider a different approach. Thanks, David!

Answer 1

There are various ways, the two most obvious would be:

1. Build a tool like YUI which builds a bespoke, unique version based on the components you ticked as required so that you can still serve the file as static. MooTools and jQuery UI all provide package-builders like this when you download their package to give you the most streamlined and effecient library possible. I'm sure a generic all purpose tool exists out there.
2. Create a simple Perl/PHP/Python/Ruby script that serves a bunch of JavaScript files based on the request. So "onerequest.js?load=ui&load=effects" would go to a PHP script that loads in the files and serves them with the correct content-type. There are many examples of this but personally I'm not a fan.

I prefer not to serve static files through any sort of script, but I also like to develop my code with 10 or so seperate small class files without the cost of 10 HTTP requests. So I came up with a custom build process that combines all the most common classes and functions and then minifies them into a single file like project.min.js and have a condition in all my views/templates that includes this file on production.

Edit - The "custom build process" is actually an extremely simple perl script. It reads in each of the files that I've passed as arguments and writes them to a new file, optionally passing the entire thing through JSMIN (available in all your favourite languages) automatically.

At the command like it looks like:

perl build-project-master.pl core.js class1.js etc.js /path/to/live/js/file.js

Answer 2

There is a good blog post on this @ http://www.hunlock.com/blogs/Supercharged_Javascript.

Answer 3

What you want is Minify. I just wrote a walkthrough for setting it up.