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)

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

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

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

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

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

Advertisements

Diganta Kumar has architected and developed software for more than a decade for a wide range of industries and development platforms and over the years has filled many roles including program manager, founder, developer, architect, team lead, mentor and project manager. Diganta is founder of two online IT businesses. He is a certified AWS Solutions Architect, certified Professional Scrum Master (PSM I), certified Professional Scrum Developer (PSD I) and ITIL Certified. He has presented at Microsoft Tech.Ed, Microsoft AppFest and Ark Group Intranet conference. He attends AWS Seattle Official Events, Seattle AWS Architects-Engineers, and AWS Cloud Commerce user groups. He likes to help, mentor and manage software development teams to improve and produce great software. He currently work as a Senior Technical Program Manager for Amazon Web Services.

Tagged with: , , ,
Posted in CSS, Javascript
6 comments on “Increase your website performance by minification of JavaScript and CSS in one click (F6)
  1. Winnie says:

    I really like what you guys are usually up too. This sort of
    clever work and exposure! Keep up the good works guys I’ve incorporated you guys to my own blogroll.

  2. Pretty! This has been an incredibly wonderful post.
    Thank you for supplying this info.

  3. I like the helpful information you provide in your articles.
    I’ll bookmark your weblog and check again here frequently. I’m quite certain I’ll learn a lot of new stuff right here! Best of luck for the next!

  4. Hello! I could have sworn I’ve been to this blog before but after looking at a few of the articles I realized it’s new to me.
    Anyways, I’m definitely pleased I came across it and I’ll be
    book-marking it and checking back often!

  5. Thanks for finally writing about >Increase your website performance by
    minification of JavaScript and CSS in one click (F6) | Diganta Kumar’s Blog <Loved it!

  6. This design is incredible! You obviously know how to keep a
    reader entertained. Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Wonderful job.
    I really loved what you had to say, and more than that, how you presented it.
    Too cool!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s