Welcome Guest
Log In | Register )
The time is now 8:24 am
You last visited July 28, 2014, 8:20 am
All times shown are
Eastern Time (GMT-5:00)

Online JavaScript Compressor, featuring YUI and Microsoft Ajax Minifier

Online YUI JavaScript Compressor

Compact your JavaScript code into the smallest size possible

  • Please see the Notes section below, which includes a description of the compressor, as well as tips for best results.
  • Paste your code in the Input box, choose the compression method, then click the Compress JavaScript button.
  • Uses Microsoft Ajax Minifier version 4.47.  (Currently produces the most compact code of any method available here.)
  • Uses YUI Compressor version 2.4.2.
  • Don't forget to compress your CSS code too!

Input

Paste JavaScript code into this space, and then click the Compress JavaScript button.

Compress JavaScriptPasteClear Input


Notes about the Online JavaScript Compressor

Featuring YUI Compressor and Microsoft Ajax Minifier

This online JavaScript compression utility, provided as a free service by Lottery Post, greatly reduces the size of your JavaScript code, stripping out unnecessary characters and performing other various techniques that reduce the size of your code, while never changing the way it works.  Lottery Post uses an internal version of this exact same tool to compress almost all JavaScript code it uses, so you can be sure it delivers safe results.

This tool does not store a copy of your code.  The server processes it on-the-fly and returns the output to you without storing anything.  So if you use this tool to compress a super-secret bit of JavaScript code (if there is such a thing) it is not stored or read by me.

Please send me your feedback to let me know what you think, or if you have suggestions or would like to report an error.

Background

For years I have used my own home-grown JavaScript compression utility, and it has performed very well.  But I have always admired Yahoo's YUI Compressor utility, because in addition to always generating flawless, well-compressed code, it also changed the code output in several ways to squeeze out an incredible amount of extra characters.

My difficulty in using the YUI Compressor has always been that it is a Java application, and I use all-Microsoft .NET technology — which made my code and the YUI Compressor like oil and water, unable to mix.  It turned out that I was finally able to devise a way to make them work together, and that means I'm able to share that success with you, by providing access to this online tool.

This compression utility is based on YUI Compressor version 2.4.2.  The YUI Compressor project page is located at http://yuilibrary.com/projects/yuicompressor/wiki.

Enter the Microsoft Ajax Minifier

In the run-up to the release of its ASP.NET 4.0 platform, Microsoft surprised the development community by releasing a software utility called the Microsoft Ajax Minifier.  Like the YUI Compressor, it generates a very compact JavaScript code, but the real surprise was that it overtook the YUI Compressor, producing the most compact code of all.

Microsoft also made it extremely easy to link other programs directly to the utility, and by doing so enabled extremely quick performance.  As a result, you will find much better performance when processing your JavaScript code using the Microsoft Ajax Minifier, and the code output will be as small as any I've seen.

My recommendation is to use the Microsoft Ajax Minifier, but by all means feel free to use either one.  It can be interesting to see how each utility differs with respect to its final output.

Although I am not aware of any problems with the compressor, there is no guarantee or warranty of the output results.

How it works

The Online JavaScript Compressor reduces the size of JavaScript code by applying several techniques. (Applies to both YUI Compressor and Microsoft Ajax Minifier.)

  • Removes comments and white-space.  This is the most obvious space-savings that all compressors accomplish.
  • Removal of all extra white-space, such that there is not one single extra white-space character.  That's not so common.  The utility is able to achieve complete elimination of white-space because unlike most compressors, the YUI Compressor is built upon an actual JavaScript parser, so it is able to know which line-breaks were necessary because the developer forgot to insert a semi-colon, and it fixes the code before removing the white-space.
  • Removes all unnecessary semi-colons.  For example, semi-colons are not needed before closing braces (}).
  • Reduction/obfuscation of local variable names.  This is my favorite feature because it really helps reduce the size, and it lets you use long variable names without worrying about performance issues or code bloat.  Any variable name that cannot be referenced from outside a function is renamed to a one- or two-letter variable name.  For example, var myLengthyVariable = 0; will become something like var a=0;.

The Microsoft Ajax Minifier applies some additional clever techniques.

  • Transforms some Object and Array definitions to the literal specification.  For example, new Array(1, 2, 3, 4, 5) becomes [1,2,3,4,5].
  • Combines duplicate literal values contained in a local function scope into local variables.  For example, if the number 12345 is used multiple times in a function scope, a statement such as var a=12345; is created at the start of the function, and all further instances of 12345 are changed to a.
  • Removes unused function arguments.  if a function is defined as function (a, b) {...} but b is never used in the function, it is removed from the argument list.  For safety, only unused arguments at the end of the argument list are removed.
  • Streamlines switch blocks to remove unneeded code, as well as code that is never executed (for example, a break that occurs after a return.
  • Removes all unnecessary curly braces.  For example, curly braces around an if that only enclose one statement.
  • Strips any debugger statements such as $Debug, Debug, Web.Debug, and Msn.Debug.  Also strips calls to the WAssert function.
  • Reworks single- and double-quotes around literal strings, and uses the one that will require the fewest number of escaped characters.
  • Maintains Safari "quirks" safety.  The Safari Web browser has a few strange bugs in how it parses JavaScript code.  The Microsoft Ajax Minifier looks for the presence of these conditions and automatically fixes them.
  • Removes unused portions of code.  The compressor keeps track of the number of times each locally-scoped function is used, and if a function is never used, it is removed from the final output.  Because globally-scoped items are never removed, this operation is safe.
  • Other miscellaneous efficiencies.  There are some other coding efficiencies that you may find when the Online JavaScript Compressor processes your code.  Every effort is made to ensure that the compressed code executes precisely the same as the uncompressed code does.

Helpful Tips

  • Eliminate all instances of eval() and with {...} from your JavaScript code.  Those two language features are considered "evil" by most expert JavaScript developers, for a number of reasons.  As far as the compressor is concerned, they will function just fine after your code is compressed, but some minification techniques used by the compressor can't be used — especially variable name shrinking.  Therefore, you code can never achieve optimal size as long as the two "evil" features are in your code.
  • Before delivering the code output, this utility always ensures that the last character is a semi-colon.  I implemented this feature as a safety measure for when minified code segments are combined.  You can decide if the final semi-colon is necessary or not when you make use of the compressed output.
  • Make sure that at the very least your code works before trying to compress it.  Your code doesn't have to be perfect, but if the compressor can't interpret it as valid JavaScript, you may get back an empty result or error message.
  • Another thing that may make compression fail is the use of reserved words.  For example, if you try to reference a property named "static" with dot notation (as in myClass.static), the code will refuse to compress.  To get around this, you can code reserved words as quoted array-style references, like myClass["static"].
  • Preserve comments:  Normally all single- and multi-line comments are removed from the compressed output.  However, you can choose to preserve specific comment blocks in the compressed output by starting them with the sequence /*!.  This can be useful for a copyright notice and/or license information.  For example: /*!
     * Watermark plugin for jQuery
     * Copyright (c) 2010 Todd Northrop
     * http://www.speednet.biz/
     */
    becomes: /*
     * Watermark plugin for jQuery
     * Copyright (c) 2010 Todd Northrop
     * http://www.speednet.biz/
     */
  • YUI Compressor only: It is possible to prevent a local variable, argument, or nested function from being obfuscated by using "hints".  A hint is a string located at the very beginning of a function body, as follows: function fn(arg1, arg2, arg3) {
       "arg2:nomunge, localVar:nomunge, nestedFn:nomunge";
       
       ...
       var localVar;
       ...
       
       function nestedFn() {
          ...
       }
       
       ...
    }
    The hint itself disappears from the code after it is compressed.

What else can I do to reduce the size of my JavaScript code?

Two words: GZIP compression.

The single-most effective technique for cutting download time for your Web pages is the application of GZIP compression to every type of resource that can handle it.  (You would not apply GZIP compression to resources that are already compressed, such as GIF images, because they can't be further-compressed, and you'll just waste CPU cycles if you try it.)

Apply GZIP compression to your HTML pages, CSS files, JavaScript files, XML files, web services output, and anything else that today your Web server sends as uncompressed text.

Most Web servers can apply GZIP compression by simply setting an option in the server.  (It's beyond the scope here to instruct you how to do it: there are lots of sources of help for this on the Web.)

So, definitely continue to use utilities like the Online JavaScript Compressor to reduce the size of Web resources, but then also apply GZIP compression to your Web resources.  Combining these two techniques will make your pages load an order of magnitude faster.

Is there something else this utility should provide?
Please let me know!