Nov.23

JavaScript & CSS Minification

There’s a thought in the software industry that unless your software performs well it’s useless – even if it has many good features. This is especially true in the web world. I’ve heard it said that unless your page loads in less than 2 seconds, people will go elsewhere.

In web applications one of the low-hanging performance fruits is to make sure that your JavaScript and CSS files are minified and, if possible, combined into a single file each. There are various tools to accomplish this. As you might expect each tool takes a different approach. Some tools will automatically detect, minify and combine the files. Others require that you specify the files you want it to act on.

Recently, I started to use the Combres library (Github) and so far it works well. You can install Combres via Nuget (seriously, if you’re not using Nuget, STOP and go download the extension for Visual Studio!). The Nuget install script handles most of configuration tasks for you like updating your project references and the web.config file.

Once the library is installed, there are only two steps remaining:

First, configure the combres.xml file to reference the script and css files you with Combres to act upon.
CombresConfig

Second, you need to add place holders for the Combres output:
CombresRefernce

 

I had to add the PlaceHolder controls to eliminate an error message about having “<%” symbols in the <head> section.

And that’s it for a basic setup of Combres. When you run your application, the Combres handler will produce a minified and combined CSS file and a minified and combined JavaScript file.

I liked several things about Combres:

  • It only acts upon the files that I tell it to. If, for some reason, I don’t want it to include a specific file, it’s easy to do – just leave it out of the xml file.
  • I can specify which compressors are used. I can even specify a different compressor for JavaScript than CSS. Check out the combres_full_with_annotation.xml file that the Nuget package installs in your App_Date directory for all the options.
  • If I want Combres to not minify and combine, it’s as easy as setting my debug setting to false in the web.config file (obviously, you don’t want to do that on production!).

I did encounter one hitch in the setup. The project I was adding this too is a Website project – not a Web Application project. So the project is dynamically compiled instead of being compiled into a DLL before deployment. Because of this, I needed to add the following line to my Global.ascx page in the Application_Start method:

System.Web.Routing.RouteTable.Routes.AddCombresRoute("Combres");

If I didn’t add that line, my HTTP requests to the combres.axd handler would return a 404 error.

Combres also does some other things that I haven’t delved too deeply. It adds some caching capabilities such as expires headers. These is another easy performance change you can do but is outside of the scope of this post.

I’ve really liked Combres and recommend that you have it a try!

JavaScript,Performance
Share this Story:
  • facebook
  • twitter
  • gplus

About Jeremy Foltz

Leave a comment

Comment