How to fit more junk in your trunk

I just wanted to quickly share a trick I’ve learnt whilst putting the final touches on our new CMS (more on that later no doubt). There’s nothing particularly clever about it, but it might save you some time.

We’ve had to use a lot of javascript. Even with jQuery, it weighs in at a fairly hefty 210kb over 14 separate .js files. Not a massive issue on a broadband connection, but still, it needed to go on a diet!

Problems with Dean Edwards Packer

I’ve previously always used Dean Edwards Packer tool to compress my javascript files. The savings it gives are quite impressive, some times compressing files by as much as 80% by clever variable name shrinking, comment removal and other neat tricks.

The problem I’ve previously had with it is that when you’re dealing with a large quantity of Javscript, it always seemed inevitable that there would be a problem with your packed output. Generally, missing a ; character from somewhere. I started to get a bit fed up using it. Although, more often than not, it was my problem. The packer seemed… broken. It made it nearly impossible to compress such a large quantity of code, and in this instance, I had more than 3000 lines of the stuff.

JSLint to the Rescue

I found a rather excellent, albeit perhaps obvious, solution to getting packer to work every time. It comes in the form of The JavaScript Verifier – JSLint

If you run your javascript through JSLint first, and fix any errors, you should find Dean Edwards packer works brilliantly. It’s amazing how tolerant browsers are of minor syntax errors that you don’t otherwise notice. The other benefit is that your JavaScript is obviously better for it.

I managed to get our code down to 129kb. A fairly impressive saving given that 50kb of the original was TinyMCE which couldn’t be compressed any more.

Thanks to all of the people behind Dean Edwards Packer and JSLint, I hope you all have a great Christmas.

Tagged as: code, javascript, jquery