Is it safe to merge several JavaScript files into one?

Question

I'm developing a dynamic website using jQuery and I have found several jQuery plugins to be very helpful when doing that.

Of course, for each plugin I add, there is another script to load when the page loads. I know that for pages to be quick to load, smaller and/or fewer resources is better.

Is it safe to just merge all those jQuery plugin files into one? Do I need to check something before I do, or can this even be done quick and dirty by a script on the server-side?

Answer 1

Yes, it is. That's what will happen in your browser, anyway.

You could also use a minification tool such as the Google Closure Compiler or the YUI Compressor to further reduce the size of your JavaScript code.

Answer 2

Yes, since your browser does fetching and executing each file, in the order they are included, and concatenating multiple scripts in one file is the same, the browser would fetch that file and execute it.

Answer 3

Yes it is safe to merge them into one.

And in most cases the page should load faster as a result, but there are some situations where doing so might slow things down. For example:

• If your site is intended for mobile devices like the iPhone, a very large Javascript file may not be cached whereas a multiple small Javascript files will be. The exact size varies depending on the phone and version (and in my experience BlackBerry devices are particularly limited) see for example http://stackoverflow.com/questions/805891/safari-cache-size-for-iphone-3-0
• If your site is intended for desktop browsers, combining all your Javascript into one file when you don't need it immediately could make your user's first visit to the site very slow. If you split up your Javascript into multiple files and only include them when needed, the user won't be hit with a massive initial download and so it's less likely that their first impression of your site is that it's slow.