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.

• OMG Ponies: I don't believe that to be true - a monolithic js file will take longer to download, and being monolithic there's risk that the page is using 25% of the js on it (or less).
• mopoke: It depends on how many files. As the previous commenter points out, putting all your JS file which is loaded by all pages can result in you loading lots of irrelevant JS. However, if you combined 3 files where all the code was often used into 1, you'd chop down on the number of HTTP requests for page load and thus improve page load speed.
• Nayan: Loading multiple files rather than sinlge one is definitely slower because your browser is establishing multiple http connection to load those files and establishing a http connection has some cost.

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.

• just somebody: why is lying to the client "the best"? at least Firefox requests js files etc conditionally (with If-Modified-Since). no need to tinker with filenames.
• OMG Ponies: When you say "files" with regard to caching, you're talking about webpages, not Javascript correct?
• cletus: No I mean static content generally (Javascript, CSS, images). Those should be aggressively cached. Who said anything about "lying"? You're basically saying to the client "Don't ask for this again until I tell you it's changed". That's good.
• Abhijeet Pathak: Merging files has one major advantage. You will not need to use a library like requirejs to correctly load the files in required order.

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.

Answer 3

You can also take a look at http://jscompress.com/, a online JavaScript compression tool.

Answer 4

you can try pakd.io you can merge css and js files