本文转自:http://www.cnblogs.com/parry/archive/2011/01/28/Reduce_Http_Request_Using_Combres_For_Js_Css.html

在前端优化的各种金律铁规中,“减少客户端对资源的请求”都会在其中出现,刚好最近对网站做一些优化,使用了一下Combres组件,有点心得,遂整理成文。

园子中也有几篇Combres组件的介绍,如:Combres库学习小结以及部分源码分析使用Combres 库 ASP.NET 网站优化。可部署时参考起来显得有些简略,所以此文也算对此类文章的补充。

配置组件

此组件的一些作用和原理在我上面提及的两篇文章中有介绍,可以自行移步至对应的文章中查看。这里还有有作者介绍的一些详细的使用方法

下载Combres组件,下载下来的包里包含了DLL、帮助文件、源码和一些例子,我们现在直接来看如何部署。

在下载下来的\Binary\merged\中有一个Combres.dll,在readme文件中得知其对可能要用到的dll都进行了打包,如Combres.dll、fasterflect.dll、log4net.dll、ajaxmin.dll、 yahoo.yui.compressor.dll等等。

在项目中引用此dll,下面来配置下配置文件。

首先配置下web.config。

在configSections配置节下添加

1 <section name="combres" type="Combres.ConfigSectionSetting, Combres, Version=2.0.0.0, Culture=neutral, PublicKeyToken=49212d24adfbe4b4"/> 

在configuration配置节下添加Combres配置文件的路径,此文件的作用我们下面再说。

1 <combres definitionUrl="~/App_Data/combres.xml"/>

配置好了后应该像这样

1 <configSections> 2       <section name="combres" type="Combres.ConfigSectionSetting, Combres,  3     Version=2.0.0.0, Culture=neutral, PublicKeyToken=49212d24adfbe4b4"/> 4  </configSections> 5  <combres definitionUrl="~/App_Data/combres.xml"/>

还需要添加httpModules的节点

1 <httpModules> 2         <add name="UrlRoutingModule" type="System.Web.Routing.UrlRoutingModule,  3     System.Web.Routing, Version=3.5.0.0, Culture=neutral,  4     PublicKeyToken=31BF3856AD364E35"/> 5 </httpModules>

注意:需要在项目中添加对System.Web.Routing的引用。

下面来配置Combres的配置文件,按照上面的路径配置,我们就在App_Data下添加combres.xml文件。

添加如下格式的配置文件。


 1 <?xml version="1.0" encoding="utf-8" ?>  2 <combres xmlns='urn:combres'>  3   <resourceSets url="~/combres.axd" defaultDuration="30"   4                                 defaultVersion="auto"   5                                 defaultDebugEnabled="auto" >  6     <resourceSet name="siteCss" type="css">  7       <resource path="~/styles/site.css" />  8       <resource path="~/styles/jquery-ui-1.7.2.custom.css" />  9     </resourceSet> 10     <resourceSet name="siteJs" type="js"> 11       <resource path="~/scripts/jquery-1.3.2.js" /> 12       <resource path="~/scripts/jquery-ui-1.7.2.custom.min.js" /> 13     </resourceSet> 14   </resourceSets> 15 </combres>    
  • defaultDuration 默认缓存的时间,单位为天数
  • defaultVersion 合并后的资源版本,在你修改了资源文件后需要对版本进行修改,你可以指定auto或者手动设置一个版本号
  • defaultDebugEnabled 调试的模式,为true时那么资源文件不进行压缩,开发时可以设置成true,上线后设置成false

具体添加压缩方法的配置节点,用于选择哪种方法对资源文件进行压缩


 1 <cssMinifiers>  2     <minifier name="yui" type="Combres.Minifiers.YuiCssMinifier, Combres">  3       <param name="CssCompressionType" type="string" value="StockYuiCompressor" />  4       <param name="ColumnWidth" type="int" value="-1" />  5     </minifier>  6   </cssMinifiers>  7   <jsMinifiers>  8     <minifier name="msajax" type="Combres.Minifiers.MSAjaxJSMinifier, Combres"   9     binderType="Combres.Binders.SimpleObjectBinder, Combres"> 10       <param name="CollapseToLiteral" type="bool" value="true" /> 11       <param name="EvalsAreSafe" type="bool" value="true" /> 12       <param name="MacSafariQuirks" type="bool" value="true" /> 13       <param name="CatchAsLocal" type="bool" value="true" /> 14       <param name="LocalRenaming" type="string" value="CrunchAll" /> 15       <param name="OutputMode" type="string" value="SingleLine" /> 16       <param name="RemoveUnneededCode" type="bool" value="true" /> 17       <param name="StripDebugStatements" type="bool" value="true" /> 18     </minifier> 19   </jsMinifiers>

要使用哪种压缩方法,在resourceSet或者在resource上添加相应的属性即可,配置后像下面这样


 1 <?xml version="1.0" encoding="utf-8" ?>  2 <combres xmlns='urn:combres'>  3   <cssMinifiers>  4     <minifier name="yui" type="Combres.Minifiers.YuiCssMinifier, Combres">  5       <param name="CssCompressionType" type="string" value="StockYuiCompressor" />  6       <param name="ColumnWidth" type="int" value="-1" />  7     </minifier>  8   </cssMinifiers>  9   <jsMinifiers> 10     <minifier name="msajax" type="Combres.Minifiers.MSAjaxJSMinifier, Combres"  11     binderType="Combres.Binders.SimpleObjectBinder, Combres"> 12       <param name="CollapseToLiteral" type="bool" value="true" /> 13       <param name="EvalsAreSafe" type="bool" value="true" /> 14       <param name="MacSafariQuirks" type="bool" value="true" /> 15       <param name="CatchAsLocal" type="bool" value="true" /> 16       <param name="LocalRenaming" type="string" value="CrunchAll" /> 17       <param name="OutputMode" type="string" value="SingleLine" /> 18       <param name="RemoveUnneededCode" type="bool" value="true" /> 19       <param name="StripDebugStatements" type="bool" value="true" /> 20     </minifier> 21   </jsMinifiers> 22   <resourceSets url="~/combres.axd" defaultDuration="30"  23                                 defaultVersion="auto"  24                                 defaultDebugEnabled="auto" > 25     <resourceSet name="siteCss" type="css" minifierRef="yui"> 26       <resource path="~/styles/site.css" /> 27       <resource path="~/styles/jquery-ui-1.7.2.custom.css" /> 28     </resourceSet> 29     <resourceSet name="siteJs" type="js"> 30       <resource path="~/scripts/jquery-1.3.2.js" minifierRef="msajax"  /> 31       <resource path="~/scripts/jquery-ui-1.7.2.custom.min.js" minifierRef="off" /> 32     </resourceSet> 33   </resourceSets> 34 </combres>

最后还需要在Global.ascx的Application_Start中添加加载的方法即可

1 protected void Application_Start(object sender, EventArgs e) 2 { 3     RouteTable.Routes.AddCombresRoute("Combres Route"); 4 }

记得在Global.ascx的头部要引入命名空间

1 <%@ Import Namespace="System.Web.Routing" %> 2 <%@ Import Namespace="Combres" %>

页面使用

1 <%@ Import Namespace="Combres" %> 2 <head runat="server"> 3     <title>Using Combres</title> 4     <%= WebExtensions.CombresLink("siteCss") %> 5     <%= WebExtensions.CombresLink("siteJs") %> 6 </head>

页面使用效果

当页面中引用了很多个js、css文件时,将都被合并成两个请求,以达到减少HTTP请求的目的。

 

作者:Parry            出处:http://www.cnblogs.com/parry/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

 

[转][前端优化]使用Combres合并对js、css文件的请求的更多相关文章

  1. JS&CSS文件请求合并及压缩处理研究(五)

    接上篇.在我们最终调用 @Html.RenderResFile(ResourceType.Script) 或者 @Html.RenderResFile(ResourceType.StyleSheet) ...

  2. Web性能优化之动态合并JS/CSS文件并缓存客户端

    来源:微信公众号CodeL 在Web开发过程中,会产生很多的js/css文件,传统的引用外部文件的方式会产生多次的http请求,从而加重服务器负担且网页加载缓慢,如何在一次请求中将多个文件一次加载出来 ...

  3. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  4. ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩

    JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...

  5. 开箱即用 - Grunt合并和压缩 js,css 文件

    js,css 文件合并与压缩 Grunt 是前端自动化构建工具,类似webpack. 它究竟有多强悍,请看它的 介绍. 这里只演示如何用它的皮毛功能:文件合并与压缩. 首先说下js,css 合并与压缩 ...

  6. 使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度

    使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度 一些泛WEB 2.0网站为了追求用户体验,可能会大量使用CSS和JS文件.这就导致在服务器带宽一定的情况下,多用户并发访问速度变慢.如何加 ...

  7. iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ

    iOS之在webView中引入本地html,image,js,css文件的方法   2014-12-08 20:00:16CSDN-sky_2016-点击数:10292     项目需求 最近开发的项 ...

  8. nginx设置反向代理后,页面上的js css文件无法加载

    问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:j ...

  9. javascript异步延时载入及推断是否已载入js/css文件

    <html> <head> <script type="text/javascript"> /**======================= ...

随机推荐

  1. jQuery立体式数字动态增加(animate方法)

    1.HTML结构 <div class="integral">已有<span class="ii"></span>积分< ...

  2. 【初探移动前端开发04】jQuery Mobile (中)

    前言 昨天我们一起学习了一部分jquery mobile的知识,今天我们继续. 这些是些很基础的东西,有朋友觉得这个没有其它的好,但是学习下不吃亏嘛,我反正也不会一起学习基础啦. 例子请使用手机查看哦 ...

  3. js异步方式

    node.js的例子 1.回调 创建 main.js 文件 var fs = require("fs"); fs.readFile('input.txt','utf8', func ...

  4. EXCEL快速自动填充方法集锦

    EXCEL快速自动填充方法集锦 原文地址,转载请注明:http://www.cnblogs.com/croso/p/5396841.html 方法一: 名称框输入a1:a1000回车,1, ctrl+ ...

  5. 服务 {49A27252-A326-4EF1-B698-6EBC7068833C} 的计时器作业 id {573BE459-DF82-481C-84BD-CA14D287450B} 配置刷新的上一个实例仍在运行,因此将跳过当前的实例。请考虑增加作业之间的时间间隔。

    在SharePoint2007的错误日志中发现大量如下错误: 07/02/2013 16:17:25.99     OWSTIMER.EXE (0x0958)     0x097C    Window ...

  6. iOS端项目注释规范附统一代码块

    代码的注释经常被人忽略,以至于在后期维护的时候较为困难.我们准备在XX项目开始之前制定一套规范的注释体系,致力于达到就算维护人员改变也能快速上手的效果. 1.属性注释 属性注释 使用 /** 注释*/ ...

  7. 项目管理、测试管理、代码bug 管理

    1.友盟统计     阿里旗下的产品 http://www.umeng.com/ 2.bugly    腾讯旗下的产品 http://bugly.qq.com/ 3.禅道  项目管理工具  需要部署到 ...

  8. 【C语言】C语言函数

    目录: 1. [函数注意点] 2. [函数目的] 3. [函数格式] 4. [函数定义前需明确的条件] 5. [函数的形参.实参] 6. [函数返回值注意点] 7. [为什么要return] 8. [ ...

  9. iOS 跳转到App Store下载或评论

    //跳转到app在AppStore页面 [[UIApplication sharedApplication] openURL:[NSURL URLWithString:[NSString string ...

  10. iOS开发笔记14:微博/微信登录与分享、微信/支付宝支付

    产品中接入了微博/微信的第三方登录分享功能.微信和支付宝的第三方支付功能,之前在开发过程中涉及到这些部分,于是抽空将接入过程梳理了一遍. 1.微博.微信.支付宝SDK相关接入设置 (1)微博SDK S ...