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 chain

Answer 1

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

Answer 2

Capistrano is a fairly popular Ruby-based web deployment tool. If you're considering it or already using it, there's a great gem that will figure out CSS and Javascript dependencies, merge, and minify the files.

gem install juicer

From the Juicer GitHub page, it can figure out which files depend on each other and merge them together, reducing the number of http requests per page view, thus improving performance.

Answer 3

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

Answer 4

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