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

本文转自：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配置节下添加

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

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

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

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

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

配置好了后应该像这样

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->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的节点

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->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文件。

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

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--> 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

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

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--> 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上添加相应的属性即可，配置后像下面这样

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--> 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中添加加载的方法即可

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

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

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

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

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

页面使用

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->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请求的目的。

时间： 2024-10-11 11:04:41

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

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

在Web开发过程中,会产生很多的js/css文件,传统的引用外部文件的方式会产生多次的http请求,从而加重服务器负担且网页加载缓慢,如何在一次请求中将多个文件一次加载出来?接下来给大家介绍在ASP.NET中动态合并加载多个js或css文件.原理:减少请求服务器的次数达到优化效果先给大家看一下传统引用方式和优化后的比较:1.传统引用方式(下图): 这样的引用方式将会请求5个js文件也就是5次http请求(下图): 2.我们来看看优化后(下图): 大家可以看到修改后只有一次请求,花费的时间节省了很

maven 配置合并压缩JS+CSS

1 <project xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd" xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> 2 <modelV

Django js css 文件配置

settings.py  加一行 SCRIPTS_URL = os.path.join(BASE_DIR,'scripts/') (在项目根目录下有个scripts文件夹 即 和manage.py 同级) 然后在urls.py 加个底下那一段,不知道为什么我在Mac下 合并在一起就不行了 难道是人品? urlpatterns = patterns('', # Examples: # url(r'^$', 'Notes.views.home', name='home'), # url(r'^blo

javascript异步延时加载及判断是否已加载js/css文件

引用就是某一变量(目标)的一个别名,对引用的操作与对变量直接操作完全一样. 引用的声明方法:类型标识符 &引用名=目标变量名: 例如: int a int &b=a; //定义引用b,它是变量a的引用,即别名 #include <stdio.h> void main() { int a = 123; int &b = a; printf("a=%d b=%d\n", a, b); } 执行结果: 实例:引用和变量的关系 #include <io

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

问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:js css文件可以正常加载: 解决方法: nginx配置文件中,增加如下配置: location ~ .*\.(js|css)$ { proxy_pass http://127.0.0.1:8866; } 原因分析: 反向代理的路径下找不到文件,需要单独指定js css文件的访问路径.

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

iOS之在webView中引入本地html,image,js,css文件的方法 2014-12-08 20:00:16CSDN-sky_2016-点击数:10292 项目需求 最近开发的项目,需要一个webView,同时这个webView会需要引入一些项目中的资源: 一个本地的html文件,作为webView的模板 两张loading图片,在图片未加载的时候进行占位 jquery.js,scrollLoading.js 也是本地的,实现滚动加载图片功能 然后就开始了漫长的Google历程. 在w

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

<html> <head> <script type="text/javascript"> /**=========================================** | 异步延时载入js/css文件 | @example loadasync("http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"); | @author [email p

xcode,在webView中引入本地html,image,js,css文件的方法

http://www.shuizhongyueming.com/2014/01/load-local-image-js-css-file-to-webview-in-xcode/ xcode,在webView中引入本地html,image,js,css文件的方法

ssm 整合中js,css 文件无法引入

问题:ssm 整合中第三方 js,css 文件无法引入 检查:ssm 整合配置完好 无拦截器拦截 spring mvc  静态资源已配置 编译时可以直接跳转到js  css 问题发现 js  css 文件放在WEB-INF 下,导致无法引入 解决 js  css 文件放在webapp 下,可以引入 原文地址:https://www.cnblogs.com/jsbk/p/9461374.html