Jquery LogoI used a ton of Jquery for the freelance project I’ve been working on lately. Included is a bunch of plugins. Although the plugins are great and add a ton of functionality, there are some downsides.

Since plugins can be created by anyone and distributed individually it leads to a mess of javascript includes. At times one plugin will even depend on another adding even more server requests. A revealing YUI post recently discussed the negative performance impact of so many requests.

The obvious solution is to combine the plugins into one file. This shouldn’t violate any license since most of the plugins are distributed under the same MIT/GPL dual license as Jquery.

The Server Side Approach

A recent thread on the Jquery Google group discussed doing this in an automated fashion using a server side script. While this can be a great solution, especially if you need a variety of scripts on each page and you cache the generated js file, it is probably a little overkill for 99% of the sites out there. My other concern is with how the browser caches the rendered file on the client PC. Since it isn’t calling a .js page (although you could fake it) does the browser know not to make the request every page? Setting the proper headers probably helps alot.

Another thing I noticed is that many of the plugins do not include a minified or packed version. Running the plugin through a packer is pretty simple, whether you do it manually or with an automated script. The thing I don’t like about the automated approach is that it removes all comments, including those crediting the original author.

My Solution

What I’ve been doing is manually running the plugins through Dean Edwards’ Packer, which strips out comments and minifies the code. Then I put the minified version in jquery.plugins.js, with the original header. This serves to separate the packed scripts in the single file, as well as give credit to the original author and maybe lead someone back to their site if they want to achieve a similar effect.

An Example

Check out this file to see this practice in action. This file combines three minified plugins, leaving the headers intact and weighs in at 5.35kb.

The Downsides

a) I’m including some plugins in a page that may not need them. I really only do with will small plugins, ones that compress to 1-5k. So if my jquery.plugins.js includes 5 plugins, but only uses 3 on a particular page it isn’t a huge hit.

b) The other downside is that if there is an update to the plugin I need to manually re-pack it and put it in the combined file, rather than dropping it into place. It’s not something that happens often, but does require some manual effort. I usually keep the original script in the same directory for reference, even if I don’t actually use it on the site.

Popularity: 59% [?]