Written by:Will
6/23/2009 

I am working on a project where we have an outside party developing a DotNetNuke® module for us that relies almost entirely on client side code.  When I way client-side code, I mean JavaScript, the jQuery library, and various jQuery plug-ins.  The module itself is really a beautiful thing.  It is actually able to be used outside of DNN without any problems at all.

Well, like any other project in the history of time, things go wrong.  This time, I need to troubleshoot part of the the JavaScript chain of code to find out where an object is not getting reassigned.  However, the JavaScript code is all compressed using the JavaScript Compressor online utility (based on the Packer by Dean Edward).  What does that mean?  That means that instead of having line breaks and indents throughout our client-side scripts, they are all removed, along with any code comments.  This can significantly reduce page load times, and decrease the time it takes for the page to render in the browser as well.  Not to mention that you’d save a ton of bandwidth.

So, instead of something like this:

/*

Some header comment here

*/

var will = 'awesome';

function awesomeness() {

if (will == 'awesome') {

        alert('Will is totally wicked awesome!');

    }

}

jQuery(document).ready( function() { awesomeness(); } );

You would see something like this:

var will='awesome';function awesomeness(){if(will=='awesome'){alert('Will is totally wicked awesome!')}}jQuery(document).ready(function(){awesomeness()});

For a JavaScript library or file containing hundreds or thousands of lines of code, you should be able to quickly see how effective this would be overall on a busy website.

Ideally, you would have two copies of every JavaScript file during development.  The first file would contain the regular JavaScript, with all of its comments, indentions, line breaks, and so on.  The copy of this file would contain the compressed version of the same code.  Typically, the files would be something like: YourCompany.js, and YourCompany.compressed.js.

The problem I ran into today, was that our original JavaScript file did not contain the same code that was in the compressed version.  To make matters worse, the compressed version of the code was the most recent version that I needed.  Unfortunately, the JavaScript Compressor utility that we’ve been using does not yet employ a decompression or unpacking feature for code that was already compressed.  That feature only exists for code that was compressed on the previous page load.

Our consultant is on vacation right now, and our client-side bug is live on our site, so please imagine how I panicked.  :)

After a little while, and some diligent research, I happened across a blog post talking about “beautifying” JavaScript code.  Basically, it was talking about the very thing I am talking to you about right now.  It had the direct link to another free online tool.  This one has the sole purpose of decompressing or unpacking JavaScript that was previously compressed like mine.  Woo hoo!

Within a few clicks and seconds, I used the JavaScript Beautifier to make my JavaScript be human-readable once again. Awesome!

TrackbackPrint

Tags:

Categories:ASP.Net

Location: BlogsThe Mighty Blog

Your name:
Your email:
	(Optional) Email used only to show Gravatar.
Your website:
Comment:
Security Code Enter the code shown above in the box below
Add Comment   Cancel