Merging multiple javascript files

Question

I've read that merging several multiple javascript files into a single file improves performance, is that true?

If so, is there an easy and error-free way of merging them, or perhaps an online-tool that automatically does that?

Many thanks.

Answer 1

See Multiple javascript/css files: best practices? and Supercharging Javascript in PHP.

The short answer is that you want to minimize external HTTP requests. The best way to do that is to force the browser to cache files you server until they change. You do this by versioning the files and providing a far future Expires header. When the filename changes (by changing the version) the browser will get the new version.

If you do this then multiple Javascript files don't really matter. But if you force the client to download 27 JS files on each and every page with no caching then reducing the number of files can make a substantial difference. Of course this is still inferior to effective caching/versioning strategies.

Another more recent issue to consider is iphone caching:

iPhone will not cache components bigger than 15K (was 25K in the previous experiment)

So in some circumstances combining files can be detrimental.

Answer 2

If you have many javascript files, it can help to combine them and to minify them. By combining them into a single file, you reduce the number of connections and files that need to be downloaded from your site. By minifying them, you actually reduce the size of the files by removing white space, comments, and so forth. Take a look at JSMin and YUI Compressor.

Edit: As other commenters indicate, combining files really only makes sense if users are actively using features from all the files. It wouldn't make sense to combine a large and rarely used javascript file in with all your commonly used functions.