LearnNowOnline

Blog

jQuery: Compressed vs Uncompressed, the Choice is Yours

Excerpt by Don Kiely | October 05, 2012

When you go to the jQuery Web site to download jQuery files, you'll find that you have two file options, shown in Figure 1: a production version (compressed) and a development version (uncompressed) of the core jQuery library. The files sizes for version 1.5 are quite different: 29KB and 207KB.

Figure 1. The download panel on the jquery website.

TIP: You can download older versions of jQuery using the Download link on the jquery.com Web site (not shown in Figure 1) as well as plugins and other extensions.

The difference in the two files is that the development version is human readable with lots of whitespace and generous amounts of comments to help you understand the code. Figure 2 shows the first few of the 8,177 lines of code in the file open in the Visual Studio code editor. We recommend that you use this version of the file, named jquery-1.5.js, while you learn jQuery and in development.

That way, you can use the Visual Studio JavaScript debugger to step into jQuery both to understand how jQuery works and to understand why your code might not be working the way you expect (and to perhaps find a bug in jQuery). Loading a 207KB file on your local development machine should take no time at all, so it won't slow down your coding.

Figure 2. The development version of the jQuery library file.

Then, when you're ready to deploy your site, use the 29KB production version in the file named jquery-1.5.min.js, where "min" stands for minified. This file has had all of the unnecessary whitespace removed, variable names shortened, and other compression tricks applied to get the size of the file as small as possible. As you can see in Figure 3, the file consists of the readable comments at the top of the file, and a single line of code; you'll see that line is 83,996 characters long if you scroll all the way to the right. If you scroll through the one line of code, you'll find that it is almost impossible to follow the logic. We humans just weren't built to process such condensed data! But a browser knows just what to do with it.

Figure 3. The production version of the jQuery library file.

The benefit of the production version is that users have to download a much smaller file when they load your page, and you save a bit on your bandwidth bill. Even though the browser will cache the file for subsequent page views, this will mean that the initial page load will be noticeably faster, particularly over slower connections.

TIP: You can get the size of the development version even smaller if you use gzip compression in your Web site.

This post is an excerpt from the online courseware for our ASP.NET 4.0 AJAX and jQuery Using Visual C# 2010course written by expert Don Kiely.