Tag Archives: visual studio

JavaScript and CSS Minification and Optimization with Visual Studio and YUI Compressor

About a year and a half ago I got very interested in JavaScript optimization. This interest was born after playing with YSlow for Firebug (Firefox). I noticed that my customer’s homepage was requiring my browser to download 2 megabytes of Images, HTML, CSS, and JavaScript. Having gotten my start in the days of modems I was aghast at the bandwidth requirements of this huge site. At the time this customer was receiving millions of hits a day due to a recent influenza outbreak. Do the math, that’s a lot of data.

YSlow recommended that the JavaScript and CSS be minified. I’d see this before with jQuery and other open source JavaScript examples. Minification is essentially a way to remove unnecessary characters and white space from the code with the goal of serving the smallest possible file over the wire to the client browser. The problem is this renders code unreadable to developers. I wondered if there was a way Visual Studio could handle this during deployment. Turns out that there is a free add-in for Visual Studio from Microsoft, Visual Studio Web Deployment Projects, which provides more advanced compilation options. The next step was to find code that Web Deployment Projects could use to perform the minification.

The “Y” in YSlow stands first for Yahoo so I went to see what they had to offer. They have open source code know as the YUI Compressor Library available for download that performs JavaScript and CSS minification. The problem for me was the code I needed was written in Java which is not simple to integrate into a Visual Studio build process. Fortunately someone had ported it to C# and thrown it up on CodePlex. It’s currently stable at version 1.4.1.0 and based on version 2.4.2 of the YUI Compressor.

The mix of Web Deployment Projects and YUI Compressor is the most efficient method for me. I don’t have to think about it because it’s integrated to my deployment build process. It provides the flexibility to either minify the files individually or merge them into one large file that my visitors only have to download one.

The customer mentioned at the beginning of this post was able to reduce the size of their JavaScript and CSS by almost 50% (1MB per unique request). This is a simple way to help your servers handle their own pandemic flu outbreak, or “slashdotting”, as efficiently as possible. Your sites will also be much more snappy as browsers are not having to parse unnecessary whitespace, comments, etc. It’s the closest you’ll get to compiling JavaScript and CSS, all for free.

Resources

Example of JavaScript Minification

Before
Javascript before minification

After
Javascript after minification

Example of CSS Minification

Before
CSS before minification

After
CSS after minification

T4 templates Intellisense support in Visual Studio 2010

A couple years ago I started using T4 templates in my Visual Studio projects. They provided me with a quick and efficient way to generate source files (C# and SQL in my case) based on the application’s database schema. T4 is also extremely useful for generating code for ASP.NET MVC (more information below). The problem only problem is that Visual Studio 2010 by default applies no Intellisense or code coloring. This makes it difficult to edit resulting in a wall of code.

T4 code in Visual Studio 2010 without Tangible Engineering extension

This problem was originally solved for me in Visual Studio 2008 in 2009  when I downloaded and eventually purchased the Clarius Visual T4 editor per recommendation by Microsoft.  Clarius stopped developing their T4 Editor plug-in in late 2009 and there is no support for Visual Studio 2010. Last Winter the lack of development made me optimistic that T4 Intellisense would be in Visual Studio 2010. Usually canceling development by a plug-in vendor Clarius indicates that Microsoft is about to make them redundant. Unfortunately this was not the case and I was left without this handy feature in Visual Studio 2010. Fortunately I can across a post today on stackoverflow that offered a FREE solution from Tangible Engineering. I downloaded and installed this software today and Intellisense was back (on most things).

T4 code in Visual Studio 2010 with Tangible Engineering extension

It appears Tangible Engineering (@tangibleeng) has adopted a crack-dealer business model like other plug-in vendors. The FREE version doesn’t support all of the C# language. It does provide enough though for developers to decide if they need to to pay 99.98 USD for the PRO edition. If you use T4 often it’s worth it, I just don’t know if I want to spend $100 again just to have the vendor flake out on the next version of Visual Studio. My hope is that the Visual Studio team bakes this feature into the next version.

Update – 8/26/2010

I appears that Clarius posted some news regarding a Visual Studio 2010 version shortly after this original post.  Read about it over at the Visual T4 blog.

More Information

T4 templates in Visual Studio 2010 require the “T4 Toolbox” available FREE on Codeplex.