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.

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.

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

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.

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.

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