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

Members Public

The Future of Automotive Mobility will be Powered by Open Source Software

Automotive companies are shifting from bending metal to bending bits. Soon they will be offering software and services to complement their manufactured metal. In order to win in the market, they will need to embrace open-source software to build leverage and enhance their offering.

Members Public

How to Host Your Static Website on Amazon S3: Step-by-Step Guide

1. Login to your Amazon AWS account 2. Create a new hosted zone for your domain using Route 53 3. Copy the NS records for this zone to your domain provider (e.g., GoDaddy) 4. Edit your domain on your domain registrar (e.g., GoDaddy) by clicking Set Nameservers 5.

Members Public

Book Review: Drupal 7 Module Development

Well, it’s been a while my Drupal friends, almost 18 months… dusting off this old Drupal 6 blog and time to start posting again. And what better way to get started again than by talking about Drupal 7, by far the best release of Drupal. And with almost 7