Skip to content

JavaScript Compression

1 min read

As I was re-rolling my JS aggregation patch for Drupal, I stumbled upon an interesting solution to an age old problem I’ve encountered numerous times.

When I write various JavaScript files for websites, I often like to serve them out compressed—not only to save on bandwidth but also to speed up the loading time for users. To accomplish the task of compressing JavaScript files, I usually resort to using tools like Dojo ShrinkSafe and Dean Edward’s packer(the same compression that jQuery uses as well).

The basis of these compressors is to remove unneeded whitespace, optional characters, and in the case of packer, simplify variable names and function names for maximum compression.

The downside of this, is that your JavaScript must be well-formed, otherwise you’ll get all sorts of weird errors when you try to used the compressed version.

While I have had great success with these tools, I often find myself encountering an error or two I just can’t resolve, so I end up sticking with the non-compressed JavaScript file. And while working on the patch for Drupal, I was running into the same issue. Why didn’t some of Drupal’s JavaScript files want to compress nicely?

Well, it turns out the solution is simple and involves adding in an optional semi-colon. Here is the example:

var foo = function bar() {
  // do something here

See it? That last semi-colon there is optional and any JavaScript will run fine without. But as soon as you go and try and compress your JavaScript file, you’ll be seeing some funky errors about a missing “;”.

The reason for this is that during the compression, all of the JavaScript is merged onto one line. As such, variables need a closing semi-colon to signify the end of their declaration.

Adding these back in to all of Drupal’s JavaScript and re-running the compressor, everything started working :-)

Hope this saves you some head banging time, enjoy!


Related Posts

MothersClick Acquired by Lifetime Networks [] and the rest of the ParentsClick Network []have been acquired by Lifetime Entertainment [] . I’ve been working on this site and with Dietrich (CEO & founder) for over 2

news — 5 min read

Leo talks about the new site

At the end of last week’s TWiT episode [], Leo and company talk about the new site []. A clip of that can be listened to below. Also last week on the Lullabot podcast []

code — 1 min read

My first 15 min of fame!

A few weeks back, Leo Laporte [] approached Lullabot [] about developing the new TWiT website []. Well we gladly accepted, I mean, this is Leo! So I was put in charge of developing the new site, and

code — 1 min read