[转][前端优化]使用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配置节下添加
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文件的请求的更多相关文章
- JS&CSS文件请求合并及压缩处理研究(五)
接上篇.在我们最终调用 @Html.RenderResFile(ResourceType.Script) 或者 @Html.RenderResFile(ResourceType.StyleSheet) ...
- Web性能优化之动态合并JS/CSS文件并缓存客户端
来源:微信公众号CodeL 在Web开发过程中,会产生很多的js/css文件,传统的引用外部文件的方式会产生多次的http请求,从而加重服务器负担且网页加载缓慢,如何在一次请求中将多个文件一次加载出来 ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩
JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...
- 开箱即用 - Grunt合并和压缩 js,css 文件
js,css 文件合并与压缩 Grunt 是前端自动化构建工具,类似webpack. 它究竟有多强悍,请看它的 介绍. 这里只演示如何用它的皮毛功能:文件合并与压缩. 首先说下js,css 合并与压缩 ...
- 使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度
使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度 一些泛WEB 2.0网站为了追求用户体验,可能会大量使用CSS和JS文件.这就导致在服务器带宽一定的情况下,多用户并发访问速度变慢.如何加 ...
- iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ
iOS之在webView中引入本地html,image,js,css文件的方法 2014-12-08 20:00:16CSDN-sky_2016-点击数:10292 项目需求 最近开发的项 ...
- nginx设置反向代理后,页面上的js css文件无法加载
问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:j ...
- javascript异步延时载入及推断是否已载入js/css文件
<html> <head> <script type="text/javascript"> /**======================= ...
随机推荐
- T3 - 构建大型 Web 应用的 JavaScript 框架
T3 是一个用于构建大型 Web 应用程序的客户端 JavaScript 框架.T3 和大多数的 JavaScript 框架不同.它的意思是一小部分的整体架构,它允许你建立可扩展的客户端代码.T3 应 ...
- DIV+CSS+JS基础+正则表达式
...............HTML系列.................... DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...
- WinForm-GridView
前端: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CKXM.aspx. ...
- ae
根据属性提取要素(利用GP) http://blog.csdn.net/ewyetc/article/details/6746728
- Java WebService 开发简单实例
Web Service 是一种新的web应用程序分支,他们是自包含.自描述.模块化的应用,可以发布.定位.通过web调用.Web Service可以执行从简单的请求到复杂商务处理的任何功能.一旦部署以 ...
- [原] SharePoint 2010 WebPart与Google地图系列 一:创建显示地图的WebPart
摘要: 作为信息化先驱的产品SharePoint 2010竟然对GIS相关技术支持如此有限,试问现在哪个企业没有大量的项目需要结合Google地图来进行开发,单纯地从Google Javascript ...
- AndroidAnnotations简单示例
@EActivity(R.layout.activity_main) public class MainActivity extends Activity { @ViewById(R.id.textV ...
- cocoaPods框架管理工具使用
前言:文中的"$"表示命令行,使用使不需要包含 cocoaPods的安装 因为cocoaPods需要用Gem进行安装,所以如果系统比较旧需要先升级Gem $ sudo gem up ...
- 【代码笔记】iOS-拍照动画
代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. se ...
- ios xcode Code signing failed 解决方案
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545; min ...