Increase your website performance by minification of JavaScript and CSS in one click (F6)

There are many ways to achieve JavaScript and CSS minification. In an ASP.NET MVC project I have successfully set up one click(F6) minification of JavaScript and CSS files using YUI Compressor .NET and MSBuild in VS2010. This minification has reduce the JS and CSS file size to 50% less, which in turn increases the application’s performance. I thought I will share my experience.

I started by installing the YUICompressor .NET (MsBuild Task) package from Nuget gallary in my VS2010 web project.

YUICompressor .NET (MsBuild Task)

Download the Sample WebSite using Post-Build events. Copy the MSBuild folder to your project root.

Open MSBuildSettings.xml (inside the MSBuild folder in your project) and modify the element UsingTask‘s attribute AssemblyFile to AssemblyFile="(root folder for your solution)\packages\YUICompressor.NET-MsBuild-Task.1.6.0.1\lib\NET35\Yahoo.Yui.Compressor.MsBuildTask.dll". Also modify the path and the final file name for CSS and JS output. Click the image below to see the code.

MSBuildSettings Using Task

Now in the MSBuildSettings.xml file include all the JavaScript and CSS files under element ItemGroup as shown in the image below,

MSBuildSettings Item Group

Finally, modify the web project Build settings. Please take note of
/p:CssOutputFile
/p:JavaScriptOutputFile
$(TargetDir) <– you might wish to change this if you have another destination directory.

VS2010 Build Events

You can copy the post-build event script from below,

$(MSBuildBinPath)\msbuild.exe "$(ProjectDir)MSBuild\MSBuildSettings.xml" /p:CssOutputFile="$(TargetDir)..\Content\themes\MyProject\MyProject.min.css" /p:JavaScriptOutputFile="$(TargetDir)..\Scripts\MyProject\MyProject.min.js"

Now, every time you build (or hit F6) in Visual Studio 2010, your project will create (if output JS or CSS files do not exist) or update the files (for e.g. in my case MyProject.min.css and MyProject.min.js) from all the files you have included in MSBuildSettings.xml earlier. In you _Layout.cshtml file add references as shown below. Do not add reference to other JavaScript and CSS files which you are minifying.

View reference to Js and Css

By using the above steps, I am automatically minifying JavaScript and CSS files in VS2010 using one click (F6). This minification has reduce the JS and CSS file size to 50% less, which in turn increases my application’s performance.

Good luck trying.

Related links,

YUI Compressor project on github

Yahoo! UI Library: YUI Compressor for .Net

Automatically minify and combine JavaScript in Visual Studio

Article helped me troubleshoot YUICompression

About Diganta Kumar

Diganta Kumar is an experienced Technical Program Manager with a passion for technology. He has architected and developed software for over a decade for a broad range of industries. Diganta is a founder of two online IT businesses. He likes to help, mentor, and manage software development teams to improve and produce great software. He currently works as a Principal Program Manager for Microsoft. Before joining Microsoft, he was with AWS for five years, where he managed large cross-functional programs on a global scale.