UglifyJS 2.0 And Kendo UI

Today marks the release of the second version of UglifyJS. If you aren't familiar with Uglify, its a JavaScript library that minifies JavaScript. It's probably the most widely used minification tool for JavaScript in the community, based on it's speed and reliability for producing compact error-free minified code.

We have been using UglifyJS since the very beginning of Kendo UI.

A Glance At Minification

If you aren't familiar with the term "Minification" as it applies to JavaScript, it's the process by which a few things are done to JavaScript source files. Namely the following:

1. All files are combined into one large file
2. Whitespace and comments are removed
3. Local variable names are renamed to single characters

var myLongButMeaningfullVariable = "foo";

// when minified becomes...

var a="foo";

UglifyJS is the "compiler" that traverses the JavaScript code and minifies it.

Let's take a Kendo UI file as an example. Here is what the kendo.core.js file looks like (just the top several lines) in it's normal state:

Now here it is minified:

Why Minify

There are several reasons for minifying code. There is some obfuscation that can be done with minification, but that's not it's primary purpose. The main reason for minifying JavaScript is that it's the fastest way to get the code to your user's browser. We like to assume everyone is on a screaming connection, but the truth is that you never know. Performance is key on the web and the best thing you can do for performance is reduce your footprint.

Lets look at a specific example from Kendo UI. The kendo.core file is required for everything, so lets look at the size of the core file (in bytes).

• kendo.core Normal State: 89,807 (88.01 KB)
• kendo.core Minified: 33,481 (32.6 KB)

That's a significant reduction in size. All brought to you by the magic of UglifyJS.

As a side note, if you are interested in comparing normal size with minified size for jQuery versions, check out Mathia Bynens post here.

UglifyJS V2 Pledgie Campaign

UglifyJS was written by Mihai Bazon who goes by the handle "Mishoo" just about everywhere on the interwebs. A while back Mishoo fired up a Pledgie campaign to help him raise enough funds to release UglifyJS version 2. We took notice of the campaign and talked about donating given how much benefit we have gotten from Uglify in terms of Kendo UI.

We ended up deciding to fully fund the project. We also decided to see if Mishoo wanted to come work on the Kendo UI team given his very particular set of skills.

Thankfully, he agreed!

We are excited to welcome Mishoo to the team where he will be working on some very interesting things coming in Kendo UI as well as continuing to work on UglifyJS as part of his work with Kendo UI.

UglifyJS will remain the open source project of Mishoo who is committed to its success.

Uglify All The Things

Checkout the GitHub repo for how to get started using UglifyJS. Additionally, read the launch blog post that Mishoo wrote up on V2 and what's new and improved.

We're glad to welcome Mishoo to the team and thrilled to be able to support a tool that we have gotten so much use out of. It's worth every penny.