How to properly compress Jquery and lots of plugins?

Question

Hi all,

I am trying to clean up the javascript of a site. I am finding the header of my site is looking like this and growing:

<script type="text/javascript" src="jquery.base.js"></script>
<script type="text/javascript" src="jquery.plugin1.js"></script>
<script type="text/javascript" src="jquery.plugin2.js"></script>
<script type="text/javascript" src="jquery.plugin3.js"></script>
<script type="text/javascript" src="jquery.plugin4.js"></script>

I am well aware of the negative effects of many http requests. The site also has lots embedded js too that will need to be pulled in to external files. I am wondering if I will be able to just copy paste all of this together and run it through some compression or will that cause issues? I hope someone has had some simillar experience.

Answer 1

Hello, if your website can run php: http://code.google.com/p/minify/

I also recommend you reading: http://www.smashingmagazine.com/2009/07/19/how-to-automate-optimization-and-deployment-of-static-content/

And: http://net.tutsplus.com/tutorials/php/3-ways-to-speed-up-your-site-with-php/

In response to your question, it will run fine, but the maintainability of code will be gone as well. If you use something like minify, you'll just need to updated your html where your static javascripts/css are included and you'll get a nice minified auto-updating static content.

Answer 2

Yes, you can copy and paste them together. Make sure to maintain source order (i.e. keep the content of jquery.base.js before jquery.plugin1.js, which is before jquery.plugin2.js, etc). It may be worth minifying as well.

Answer 3

Usually you can merge and compress script files. Depending on your server side framework, you might already have the respective routines in place, such as the ASP.NET composite script, http://msdn.microsoft.com/en-us/library/cc488552.aspx . If you don't, it depends on your server how to set the proper http headers for deflate or gzip compressed files (assuming you manually merge and compress them).

Answer 4

I've found that the Yahoo Compressor works best for minifying javascript. Here is a link: YUI Compressor

Also, you might want to move all of those script file references to the bottom of your page so that the rest of your page can load faster and then those scripts can be pulled down.

Answer 5

Copy and paste them all into one script, run them through a minifier, save the resulting file and link to it from the bottom of your page (so the DOM loads without waiting for that file to be loaded), and make sure your server gzips it.

Gzipping will save you even more than minifying. The two together can reduce the file size 80% easily on top of the reduced HTTP requests.

Answer 6

I suggest you look at Supercharging Javascript in PHP for good practices in combining and caching Javascript.