Minifying Javascript & CSS in ASP.net MVC 

Minifying Javascript & CSS in ASP.net MVC

YSlow

Have you ever wonder why your website took more than 1 minute to load even on localhost? YSlow from Yahoo is a very handy tool to meter loading performance of your web application.

Accumulated yahoo years of experience serving billion of visitor hits daily, the tool provide grading base on analysis on various ruleset, for example:

• Making fewer HTTP requests
• Put JavaScript at the bottom of HTML
• Make Javascript and CSS external
• Minify Javascript and CSS
• Make AJAX cacheable
• ...

It is available as Firefox browser plugin for Free download here.

 

Minify

It has been a trend recently to provide a xxx-min.js by various javascript libraries. A minify javascript/css version of file removed unneeded infromation such as comment, white space, or even rename long variable name to shorter one to achieve smallest byte footprint as possible.

There are several free & open source tools out there who does the work for you automatically, either in "pre-compile" or real-time mode:

• YUI Compressor
• Jsmin
• Dojo ShrinkSafe

 

Using with ASP.net MVC

In real world scenario, we often include multiple javascript and css files due to the modularization of application design. It's common to have more than 10s jquery plugin js files along with 4 to 5 css files. Each of these external files will trigger the browser to send at least one HTTP request per hit, thus defeating the thumb of rule number 1 defined by YSlow: "Making fewer HTTP requests".

Combres, an open source .Net library hosted on codeplex, is a prefect tool to minify and yet combine multiple javascript & css files on real-time with caching. It works in both ASP.net  WebForm and MVC environement.

I will not go into detail on how to deploy it as Code Project has provided a comprehensive tutorial here. Following the step by step tutorial, you will be amaze by combres as how easily it can be implemented into your existing project with little modification and huge beneficts in return.

 

Before:

<!-- jquery base -->
<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery.cookie.js") %>" type="text/javascript"></script>

<!-- jquery ui -->
<script src="<%= Url.Content("~/Scripts/jquery-ui-1.7.2/ui/jquery-ui-1.7.2.custom.min.js") %>" type="text/javascript"></script>
<link href="<%= Url.Content("~/Scripts/jquery-ui-1.7.2/themes/smoothness/jquery-ui-1.7.2.custom.css") %>" rel="stylesheet" type="text/css" />


<!-- system core -->
<script src="<%= Url.Content("~/Scripts/core.js") %>" type="text/javascript"></script>

<!-- notices plugin -->
<script src="<%= Url.Content("~/Scripts/notice.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery.blockUI.js") %>" type="text/javascript"></script>
<link href="<%= Url.Content("~/Content/notice.css") %>" rel="stylesheet" type="text/css" />

<!-- form plugin -->
<script src="<%= Url.Content("~/Scripts/jquery.hint.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/form.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery.maskedinput.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery-ui-1.7.2/ui/ui.datepicker.js") %>" type="text/javascript"></script>
<link href="<%= Url.Content("~/Content/form.css") %>" rel="stylesheet" type="text/css" />


<!-- tip plugin -->
<script src="<%= Url.Content("~/Scripts/jtip.js") %>" type="text/javascript"></script>
<link href="<%= Url.Content("~/Content/Helpers/Tip/css/global.css") %>" rel="stylesheet" type="text/css" />

<!-- autocomplete plugin -->
<script src="<%= Url.Content("~/Scripts/jquery-autocomplete/jquery.autocomplete.js") %>" type="text/javascript"></script>
<link href="<%= Url.Content("~/Scripts/jquery-autocomplete/jquery.autocomplete.css") %>" rel="stylesheet" type="text/css" />
    
<!-- grid plugin -->
<script src="<%= Url.Content("~/Scripts/grid.js") %>" type="text/javascript"></script>
<link href="<%= Url.Content("~/Content/grid.css") %>" rel="stylesheet" type="text/css" />

<!-- passwordStrength plugin -->
<script src="<%= Url.Content("~/Scripts/jquery-pstrength/digitalspaghetti.password.js") %>" type="text/javascript"></script>

 

Then, implement Combres by rellocate them to xml file:

<?xml version="1.0" encoding="utf-8" ?>
<combres xmlns='urn:combres'>
  
  <filters>
    <filter type="Combres.Filters.FixUrlsInCssFilter, Combres" />
    <filter type="Combres.Filters.HandleCssVariablesFilter, Combres" />
  </filters>
  
  <resourceSets url="~/combres.axd" defaultDuration="30" defaultVersion="1" defaultDebugEnabled="true">
    
    <resourceSet name="siteCss" type="css">
      <resource path="~/Content/style.css" />
      <resource path="~/Scripts/jquery-ui-1.7.2/themes/smoothness/jquery-ui-1.7.2.custom.css" />
      <resource path="~/Content/notice.css" />
      <resource path="~/Content/form.css" />
      <resource path="~/Content/Helpers/Tip/css/global.css" />
      <resource path="~/Scripts/jquery-autocomplete/jquery.autocomplete.css" />
      <resource path="~/Content/grid.css" />
      <resource path="~/Scripts/jquery-countdown/jquery.countdown.css" />
    </resourceSet>
    
    <resourceSet name="siteJs" type="js">
      <resource path="~/Scripts/jquery-1.3.2.js" />
      <resource path="~/Scripts/jquery.cookie.js" />
      <resource path="~/Scripts/jquery-ui-1.7.2/ui/jquery-ui-1.7.2.custom.min.js" />
      <resource path="~/Scripts/core.js" />
      <resource path="~/Scripts/notice.js" />
      <resource path="~/Scripts/jquery.blockUI.js" />
      <resource path="~/Scripts/jquery.hint.js" />
      <resource path="~/Scripts/form.js" />
      <resource path="~/Scripts/jquery.maskedinput.js" />
      <resource path="~/Scripts/jquery-ui-1.7.2/ui/ui.datepicker.js" />
      <resource path="~/Scripts/jtip.js" />
      <resource path="~/Scripts/jquery-autocomplete/jquery.autocomplete.js" />
      <resource path="~/Scripts/grid.js" />
      <resource path="~/Scripts/jquery-pstrength/digitalspaghetti.password.js" />
      <resource path="~/Scripts/jquery-countdown/jquery.countdown.js" />
      <resource path="~/Scripts/countdown.js" />
      <resource path="~/Scripts/jquery.pngFix.js" />
    </resourceSet>
    
  </resourceSets>
</combres>

 

In result, only 2 line of codes in output:

<link href="/combres.axd/siteCss/1/default" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/combres.axd/siteJs/1/default"></script>

 

Your visitors will be happy as your website is loading faster now. Not to mention that your boss will be smilling for the cost saved from the bandwidth.