Minify JavaScript

Why

JavaScript, like most other languages, is a language that requires the developer to use a nice structure when writing it – a structure that requires the use of line breaks, indentation and comments. Otherwise it becomes difficult to maintain.

The problem with line breaks, indentation (tabs or spaces) and comments are that they add to the weight of the file. Remember that line breaks, tabs and spaces are also characters even though not visible in the sense most other characters are. When browsers parse JavaScript they do not use those extra characters for anything – they also ignore all comments in the code.

Example

Consider a JavaScript file with the following content:

// Does something with the selected ID

function DoSomething(id) {

  if (id == 0) {

    alert('Id is invalid');

  }

}

When the browser will parse the file above, it actually only needs this next line to do exactly the same:

function DoSomething(id){if(id==0){alert('Id is invalid')}}

If we could provide the browser with the second file instead of the first, the download size would be 50% smaller. Depending on the amount of comments and whitespace in your JavaScript files, expect your mileage to vary. The important thing is that we need to write in the style of the first example for maintainability, but serve the second example to the browser for performance.

The trouble with minifying JavaScript is that if your forget some semi-colons, you will probably end up with a lot of JavaScript errors on your website after a minification. Let’s first look at how to minify before exploring how not to forget semi-colons and other gotcha’s.

How to minify JavaScript

There are a few different ways of minifying JavaScript files in ASP.NET. The most popular are:

Using a manual tool

Before a website is deployed to its live environment, you can run a minification tool like JSMin or an online one like Minify JS. By running the tools manually, you stay in absolute control over the process and are able to verify that the code isn’t broken as you go along. The problem is that it is time consuming and that you need to do a complete test (again) of your JavaScript before deploying.

The reason why you need to test the JavaScript after minification is because the code is now different than it was when you wrote it and tested it locally.

Using an automated tool

By minifying as part of the build process, you save the time spend doing it manually. There are many articles online on how to use JSMin or YUI Compressor with MSBuild, Nant and almost every other build system.  Even though you save the time spend doing it manually, you still need to test everything all over again because the JavaScript code now is different than on your developer machine.

Using an HTTP handler

This is the only option that requires code to run inside your website project at runtime. The advantage is by minifying JavaScript at runtime, you serve exactly the same JavaScript code to the browser on both your developer and live environments. That will save you a lot of debugging in the end, but requires extra code and an entry in the web.config.

Because the HTTP handler method removes the danger of running different JavaScript on the developer and live environment, this is the recommended approach.

NB: When using an HTTP handler you need to apply output caching so that the minification only occurs once per file in the website application’s lifetime. Otherwise you run in to an unnecessary CPU overhead by doing string manipulation at every request.

Enforce correct syntax

Since minification happens automatically no matter which solution you choose, there is a (big) change of your JavaScript will break and cause errors in the browser if the syntax isn't correct. Forgetting a semi-colon isn't a problem for modern browsers normally, but after minification the JavaScript code will be on one single line and that will cause problems even for the most forgiving of browsers.

It can be difficult to debug and figure out where the erros is, but luckily there is a free Visual Studio add-in we can use. It's called JSLint.VS and integrates into Visual Studio's context menu and you can even tell it to run on compile time so you catch every error all the time.

The WebOptimizer

If you wish to use the WebOptimizer to minify JavaScript files, all you need to do is to download it, copy it to the bin folder of your website and add the following to your web.config:

IIS 6

<add verb="*" path="*.js" type="WebOptimizer.Handlers.JavaScriptHandler, WebOptimizer" validate="false" />

You will have to make sure the IIS sends .js file request to the ASP.NET engine for this to work.

IIS 7

<add name="JavaScriptHandler" verb="*" path="*.js" type="WebOptimizer.Handlers.JavaScriptHandler, WebOptimizer" resourceType="Unspecified" />

The minifier in the WebOptimizer is an HTTP handler that uses JSMin as the minification algorithm and it also handles output- and client caching for optimal performance.