combining javascript files

Question

I've launched a redesign of our website and I'm using quite a bit of Javascript for the first time.

I've learned that I should be combining all my javascript and css into one file (each obviously) but while I know I can combine the css without problems but the javascript I'm not sure of.

I have to load:

jquery.min.js <-- I load the top two from ajax.googleapis.com, is that a good idea

jquery-ui.min.js

javascript for Facebook

some for google plus button

same for twitter

some for google analytics

then some inline stuff to hide divs which javascript users shouldn't see and that type of thing.

you can see it here: traditionalirishgifts.com

So can I just copy and paste the contents of all these files into one big file. Find some way to minify (haven't looked into that fully yet) it. Load this one file right at the bottom of my page before and bingo?

Answer 1

I'd use this tool: http://jscompress.com/

JSCompress.com is an online javascript compressor that allows you to compress and minify your javascript files. Compressed javascript files are ideal for production environments since they typically reduce the size of the file by 30-90%. Most of the filesize reduction is achieved by removing comments and extra whitespace characters that are not needed by web browsers or visitors.

Answer 2

You should always be able to merge all your external JavaScripts into one file. You can use a server-side compressor to cache it and serve it as one file. It does put some constraints on the files, like which file should load first etc. Also, if there is a syntax error anywhere it will crash completely.

Keep in mind that 3rd party code like code from google can't be mixed in. Usually there is some kind of authentication going on (or an API key in the URL). If you try to cache that code, it will stop working after a while. So you do need to keep those separate.