ASP.NET MVC: How to combine scripts and other resources
MVC Resource Combine is open-source project you can find in CodePlex. ASP.NET official ScriptManager needs server-side form as a container. This means that all scripts are loaded in the body of page. I have found no way how to make ScriptManager to create script and other references to page header. MVC Resource Combine is free of this problem.
MVC Resource Combine is easy to use. Just follow these steps.
- Download the latest release and add references to DLL-s of MVC Resource Combine.
- Add the following line to web.config file, under <configSections> element:
<section name="resourceCombine" type="Mvc.ResourceCombine.ConfigSectionSetting,
- Add the following line to web.config file, under <configuration> section:
<resourceCombine definitionUrl="~/App_Data/combine.xml" />
- Now open Global.asax and add the following line before all the other route definitions:
<?xml version="1.0" encoding="utf-8" ?>
<resourceCombine url="~/combine.axd" defaultDuration="15"
<resourceSet name="jqGrid" type="js" duration="30"
- Now open Site.Master and add call for MVC Resource Combine and specify resource set by its name (jqGrid):
- Now run your application and view page source. You should see something like this:
NB! Don’t forget to add reference to Mvc.ResourceCombine namespace in your Global.asax and Site.Master files. Well, if you have Resharper, then it is almost possible to forget these references. :)
Now, let’s see results. It’s Saturday and I’m watching Estonian biggest song contest, so I’m too lazy to add Firebug screenshots here. I have a little bit different configuration but numbers in the following table should give you some idea about wins in performance.
As you can see, using MVC Resource Combining it is possible to achieve better performance with pretty simple and time consuming efforts. Also you don’t have to mix ScriptManager and other ASP.NET forms elements to your ASP.NET MVC views. By the way, you can combine also all the other resources that can be downloaded as one file – by example, style sheets.