How to mix multiple javascript files into one?

Question

To reduce http request i want to mix multiple jquery plugin's javascript filesa and main jquery file into one.

What things should be considered?

Do we just need to place code from all files into new file one bye one or need to do something more. ?

Answer 1

You can use the YUI Compressor. As I recall, it can combine files. It's written in Java and can be incorporated into your build or publish process.

Answer 2

What I use:

1. combine all files dynamicly in a single HTTP request using a cocoon pipeline. You may replace this step at build time to concat all files one after another.
2. compressing the resulting request with JSmin

Answer 3

We have an ANT script that combines all JS files into one and then compresses it. Its based on a switch so DEV & QA environments use expanded files while UAT/PROD use everything combined. BtW, not only JS files, you may like to combine CSS as well. We used to put couple of new lines and a semicolon after each file's content.

Answer 4

If you are using PHP, you can use minify which will let you compact and merge several CSS and JS files.

Answer 5

In addition to what others have said, you may want to ensure you are observing dependency order with your files. If you are using jQuery and other plugins, ensure that jQuery is at the top of the compressed output, and any subsequent dependencies follow this, in order of least dependent to most.