Solving development problems  |  About this blog

Archive for the ‘combine external javascript files into one request’ tag

Combine Javascript and CSS in one request, minimization and optimization in ASP.NET MVC

There is an Combres project that can help you achieve this goal: http://combres.codeplex.com/

Here is a tutorial how to use it:

http://www.codeproject.com/KB/aspnet/combres2.aspx

1. Put this in web.config:
<configuration>
<configSections>
<section name="combres" type="Combres.ConfigSectionSetting, Combres, Version=2.0.0.0, Culture=neutral, PublicKeyToken=49212d24adfbe4b4"/>
...
</configSections>
<combres definitionUrl="~/App_Data/combine.xml"/>
...
</configuration>

2. Put this in Global.asax
At the top put this:

using Combres;



And then in the Application_Start put this:


protected void Application_Start()
{
//Apply combres compression
RouteTable.Routes.AddCombresRoute("Combres Route");
}

3. Add a reference in your project to merged Combres.dll library.

4. Create an xml file (named it as it is in web.config and put it in specified location):

<?xml version="1.0" encoding="utf-8" ?>
<combres xmlns='urn:combres'>
<resourceSets url="~/combres.axd" defaultDuration="30" defaultVersion="11">
<resourceSet name="siteCss" type="css">
<resource path="~/Styles/jquery.paginate.css" />
<resource path="~/Styles/general.css" />
<resource path="~/Styles/redmond/jquery-ui-1.8rc3.custom.css" />
<resource path="~/Styles/jquery.fancybox-1.3.0.css" />
<resource path="~/Styles/jquery.ratings.css" />
</resourceSet>
<resourceSet name="siteJs" type="js">
<resource path="~/Scripts/jquery-1.4.2.min.js" />
<resource path="~/Scripts/jquery-ui-1.8rc3.custom.min.js" />
<resource path="~/Scripts/jquery.ratings.js" />
<resource path="~/Scripts/jquery.paginate.js" />
<resource path="~/Scripts/jquery.apag.js" />
<resource path="~/Scripts/fancybox/jquery.easing-1.3.pack.js" />
<resource path="~/Scripts/fancybox/jquery.mousewheel-3.0.2.pack.js" />
<resource path="~/Scripts/fancybox/jquery.fancybox-1.3.0.pack.js" />
<resource path="~/Scripts/swfobject.js" />
</resourceSet>
</resourceSets>
</combres>

5. In the HEAD of yout HTML or master page call this:

<head runat="server">
<title>Some title...</title>
<%= Combres.WebExtensions.CombresLink("siteCss")%>
<%= Combres.WebExtensions.CombresLink("siteJs")%>
</head>