Compacting CSS and Javascript files

Torrential Web Dev

Saturday, January 13. 2007

Posted by Jonathan Street in Programming, Website Management at 12:48

Comments (3)
Trackback (1)

Compacting CSS and Javascript files

There was an interesting post on Wednesday from Joshua Eichorn. Briefly he runs through a method for caching compressed javascript and css files prior to hosting them on a web server. He makes this all work with a few lines in a .htaccess file.

It is a good post but I think he misses something

There are a lot of various approaches for cutting down the size of JavaScript and CSS. Some of the common ones are removing whitespace and comments for JS and CSS, or using scripts which use alternate smaller syntaxes. There are a couple problems with this approach first it just doesn’t save as much space as I’d like, you can cut 60K of JavaScript down to 30K but not 10K. Second it makes debugging horrible, every JavaScript or CSS error comes from line 1 or the file.


Compacting and compressing javascript and css files is not mutually exclusive. As I showed in an old post looking at compacting javascript and css files 33% reductions in file size can be achieved by compacting these files even if you then compress them. To my mind that's worth doing.

His second point I understand even less. My experience with javascript I will freely admit is not as extensive as I would like but if some code works before compacting then it works afterwards. I sort out any bugs in development and only when my work is ready for deployment do I compact my css and javascript.

Trackbacks
Trackback specific URI for this entry

Preventing javascript files from caching
I recently commented on a post from Joshua Eichorn looking at caching javascript files. In the post he highlights the savings that can be made in terms of bandwidth. What can you do though if you want to prevent javascript from caching? The php manua
Weblog: Torrential Web Dev
Tracked: Jan 26, 14:29

Comments
Display comments as (Linear | Threaded)

Once you start deploying large amounts of JavaScript on various browsers you'll hit bugs. Its not that compressing breaks the code (though some packers can) its that you can't useful error messages when your code is packed to a single line. So every JavaScript errors happens on line 1.
#1 Joshua Eichorn (Homepage) on 2007-01-13 15:32
Hi Joshua

I'm glad you got the trackback. For some reason it didn't want to send on the first try so if you got it twice I apologise.

The difference between whether to compact js or not may just be a question of experience with large projects then. As I said my experience with javascript is fairly limited so these types of errors may be something I still have to look forward to.
#1.1 Jonathan Street (Homepage) on 2007-01-13 16:59
Besides project size, I think the other factor in compacting code is how your using JavaScript. If your building a JavaScript app you end up have a lot more logic built in JavaScript and its that type of code that tends to hit more bugs.

Maybe you don't handle a failed AJAX request correctly, or the new version of IE has some slight API changes in seldom used code. But really its a tradeoff, code size against good bug reports, a lot of times good bug reports don't matter since people aren't going to send anything in anyway.

I tend to strip out comments and extra whitespace, but I don't do a full compact.
#1.1.1 Joshua Eichorn (Homepage) on 2007-01-13 17:32

The author does not allow comments to this entry

Frontpage - Top level