ASP.NET MVC:怎么组合脚本和其他资源？

ASP.NET MVC: How to combine scripts and other resources

ASP.NET pages that use AJAX components make usually many requests to server per one page to load all required JavaScript and CSS files. Connections, like all other real time resources, are most expensive to create and keep. If we can somehow decrease the number of requests per page load then we need less server resources for same amount of users. For ASP.NET forms we can use script combining, for ASP.NET MVC applications we can use ASP.NET MVC Client-side Resource Combine.

asp.net页面经常需要用ajax组件在服务器端请求许多javascript脚本和css文件.如果我们可以利用一些方法来减少请求的次数的话,相同的用户就可以访问更多的服务器资源啦.Asp.netForms 可以利用script组合,asp.net mvc程序同样可以用 ASP.NET MVC Client-side Resource Combine .

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.

ASP.NET MVC Client-side Resource Combine 是一个开源的项目可以再CodePlex上找到。asp.net官方的scriptManager需要一个服务器端的容器.也就是说必须把script加载到body里面,我没找到其他方法可以把script和其他资源放到header里面.MVC Resource Combine没这个问题.

MVC Resource Combine is easy to use. Just follow these steps.

1. Download the latest release and add references to DLL-s of MVC Resource Combine.
2. Add the following line to web.config file, under <configSections> element:
3. MRC 用起来很简单,只需要几步.下载MVC Resources Combine 的dll文件,并添加下面的元素到web.config 的<configSections>节点

4. ---

   <section name="resourceCombine" type="Mvc.ResourceCombine.ConfigSectionSetting, 
   Mvc.ResourceCombine" />

   ---

5. Add the following line to web.config file, under <configuration> section:

   ---

   <resourceCombine definitionUrl="~/App_Data/combine.xml" />

   ---

6. Now open Global.asax and add the following line before all the other route definitions:

   ---

   routes.AddResourceCombineRoute("Resource Combine");

   ---

7. To App_Data folder add new XML-file combine.xml. By example, for jqGrid you may have JavaScript resource set like this:

   ---

   <?xml version="1.0" encoding="utf-8" ?>

   <resourceCombine url="~/combine.axd" defaultDuration="15" 
     defaultVersion="1" >

     <resourceSet name="jqGrid" type="js" duration="30" 
     version="a">

       <resource path="~/Scripts/jquery-1.3.2.js" 
         mode="LocalStatic" />

       <resource path="~/Scripts/jquery.jqGrid.js" 
         mode="LocalStatic" />

       <resource path="~/Scripts/js/jqModal.js" 
         mode="LocalStatic" />

       <resource path="~/Scripts/js/jqDnR.js" 
         mode="LocalStatic" />

       <resource path="~/Scripts/jquery.ajaxQueue.js" 
         mode="LocalStatic" />

       <resource path="~/Scripts/jquery.bgiframe.min.js" 
         mode="LocalStatic" />

       <resource path="~/Scripts/thickbox-compressed.js" 
         mode="LocalStatic" />

       <resource path="~/Scripts/jquery.autocomplete.js" 
         mode="LocalStatic" />

     </resourceSet>

   </resourceCombine>

   ---

8. Now open Site.Master and add call for MVC Resource Combine and specify resource set by its name (jqGrid):

   ---

   <%= Html.CombinerLink("jqGrid")%>

   ---

9. Now run your application and view page source. You should see something like this:

   ---

   <script type="text/javascript" src="/combine.axd/jqGrid/a">
   </script>

   ---

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.

Before combineAfter ombineDifference (before/after)

Requests 21 4 5.25

Size (kb) 259 19 13.63

Time (s)7.69 4.84 1.59

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.

你可以看到,用mvc resurce combining 具有更好的执行效率.你也不需要在mvc 视图里面混合ScriptManage或者其他asp.net forms的元素啦.另外,你也可以组合其他可以下载的资源比如样式文件.