CODEWITHSUNDEEP
javascriptjqueryjquery-pluginscompression
kevzettler
kevzettler

Reputation: 5213

How to properly compress Jquery and lots of plugins?

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.

Upvotes: 1

Views: 5805

Answers (6)

cletus
cletus

Reputation: 625427

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

Upvotes: 2

Gabriel Hurley
Gabriel Hurley

Reputation: 40082

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.

Upvotes: 5

Nathan
Nathan

Reputation: 4067

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.

Upvotes: 3

Alex
Alex

Reputation: 1594

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.

Upvotes: 1

Malte Clasen
Malte Clasen

Reputation: 5637

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).

Upvotes: 0

c_harm
c_harm

Reputation:

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.

Upvotes: 0

Related Questions