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

Question

This concept is new to me - I first met it in the YUI dependency configurator . Basically, instead of having multiple requests for many files, the files are tied into a single HTTP request to reduce page load time.

Does anyone know how to implement this on the LAMP stack? (I saw that a similar question has already been asked, but it seems to be specific to ASP .

Thanks!

Update: both answers are useful ... (my representative is not high enough to comment, so I add some thoughts about separation here). I also came across another blog post with PHP examples that might be helpful. David builds the answer, however, forcing me to consider a different approach. Thanks David!

Answer 1

There are different ways: the two most obvious:

• Create a tool like YUI that builds an individual, unique version based on the components you marked as needed so that you can still serve the file as static. MooTools and jQuery UI provide developers with such packages when you download their package to provide you with the most simplified and efficient library possible. I am sure that there is a common universal tool.
• Create a simple Perl / PHP / Python / Ruby script that will contain a bunch of request-based JavaScript files. So, "onerequest.js? Load = ui & load = effects" will go to a PHP script that loads into files and serves them with the correct content type. There are many examples of this, but I personally am not a fan.

I prefer not to serve static files through any kind of script, but I also like to develop my code with 10 or so separate files of a small class without the cost of 10 HTTP requests. Therefore, I came up with my own build process, which combines all the most common classes and functions, and then reduces them to a single file, for example project.min.js, and has a condition in all my views / templates that include this file in production.

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

In a team, what it looks like:

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

Answer 2

This blog has a good blog entry @ http://www.hunlock.com/blogs/Supercharged_Javascript .

Answer 3

Do you want Minify . I just wrote a walkthrough to set it up.

Answer 4

Capistrano is a fairly popular Ruby-based deployment tool. If you are considering this or are already using it, there is a big stone that will define CSS and Javascript dependencies, combine and minimize files.

gem install juicer

On the Juicer GitHub page, you can determine which files are dependent on each other and combine them together, reducing the number of HTTP requests per page view, which improves performance.