[前端优化]使用Combres合并对js、css文件的请求-北京尧图网络

在前端优化的各种金律铁规中“减少客户端对资源的请求”都会在其中出现刚好最近对网站做一些优化使用了一下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配置节下添加1sectionnamecombrestypeCombres.ConfigSectionSetting, Combres, Version2.0.0.0, Cultureneutral, PublicKeyToken49212d24adfbe4b4/在configuration配置节下添加Combres配置文件的路径此文件的作用我们下面再说。1combresdefinitionUrl~/App_Data/combres.xml/配置好了后应该像这样1configSections2sectionnamecombrestypeCombres.ConfigSectionSetting, Combres,3Version2.0.0.0, Cultureneutral, PublicKeyToken49212d24adfbe4b4/4/configSections5combresdefinitionUrl~/App_Data/combres.xml/还需要添加httpModules的节点1httpModules2addnameUrlRoutingModuletypeSystem.Web.Routing.UrlRoutingModule,3System.Web.Routing, Version3.5.0.0, Cultureneutral,4PublicKeyToken31BF3856AD364E35/5/httpModules注意需要在项目中添加对System.Web.Routing的引用。下面来配置Combres的配置文件按照上面的路径配置我们就在App_Data下添加combres.xml文件。添加如下格式的配置文件。1?xml version1.0 encodingutf-8?2combresxmlnsurn:combres3resourceSetsurl~/combres.axddefaultDuration304defaultVersionauto5defaultDebugEnabledauto6resourceSetnamesiteCsstypecss7resourcepath~/styles/site.css/8resourcepath~/styles/jquery-ui-1.7.2.custom.css/9/resourceSet10resourceSetnamesiteJstypejs11resourcepath~/scripts/jquery-1.3.2.js/12resourcepath~/scripts/jquery-ui-1.7.2.custom.min.js/13/resourceSet14/resourceSets15/combresdefaultDuration 默认缓存的时间单位为天数defaultVersion 合并后的资源版本在你修改了资源文件后需要对版本进行修改你可以指定auto或者手动设置一个版本号defaultDebugEnabled 调试的模式为true时那么资源文件不进行压缩开发时可以设置成true上线后设置成false具体添加压缩方法的配置节点用于选择哪种方法对资源文件进行压缩1cssMinifiers2minifiernameyuitypeCombres.Minifiers.YuiCssMinifier, Combres3paramnameCssCompressionTypetypestringvalueStockYuiCompressor/4paramnameColumnWidthtypeintvalue-1/5/minifier6/cssMinifiers7jsMinifiers8minifiernamemsajaxtypeCombres.Minifiers.MSAjaxJSMinifier, Combres9binderTypeCombres.Binders.SimpleObjectBinder, Combres10paramnameCollapseToLiteraltypeboolvaluetrue/11paramnameEvalsAreSafetypeboolvaluetrue/12paramnameMacSafariQuirkstypeboolvaluetrue/13paramnameCatchAsLocaltypeboolvaluetrue/14paramnameLocalRenamingtypestringvalueCrunchAll/15paramnameOutputModetypestringvalueSingleLine/16paramnameRemoveUnneededCodetypeboolvaluetrue/17paramnameStripDebugStatementstypeboolvaluetrue/18/minifier19/jsMinifiers要使用哪种压缩方法在resourceSet或者在resource上添加相应的属性即可配置后像下面这样1?xml version1.0 encodingutf-8?2combresxmlnsurn:combres3cssMinifiers4minifiernameyuitypeCombres.Minifiers.YuiCssMinifier, Combres5paramnameCssCompressionTypetypestringvalueStockYuiCompressor/6paramnameColumnWidthtypeintvalue-1/7/minifier8/cssMinifiers9jsMinifiers10minifiernamemsajaxtypeCombres.Minifiers.MSAjaxJSMinifier, Combres11binderTypeCombres.Binders.SimpleObjectBinder, Combres12paramnameCollapseToLiteraltypeboolvaluetrue/13paramnameEvalsAreSafetypeboolvaluetrue/14paramnameMacSafariQuirkstypeboolvaluetrue/15paramnameCatchAsLocaltypeboolvaluetrue/16paramnameLocalRenamingtypestringvalueCrunchAll/17paramnameOutputModetypestringvalueSingleLine/18paramnameRemoveUnneededCodetypeboolvaluetrue/19paramnameStripDebugStatementstypeboolvaluetrue/20/minifier21/jsMinifiers22resourceSetsurl~/combres.axddefaultDuration3023defaultVersionauto24defaultDebugEnabledauto25resourceSetnamesiteCsstypecssminifierRefyui26resourcepath~/styles/site.css/27resourcepath~/styles/jquery-ui-1.7.2.custom.css/28/resourceSet29resourceSetnamesiteJstypejs30resourcepath~/scripts/jquery-1.3.2.jsminifierRefmsajax/31resourcepath~/scripts/jquery-ui-1.7.2.custom.min.jsminifierRefoff/32/resourceSet33/resourceSets34/combres最后还需要在Global.ascx的Application_Start中添加加载的方法即可1protectedvoidApplication_Start(objectsender, EventArgs e)2{3RouteTable.Routes.AddCombresRoute(Combres Route);4}记得在Global.ascx的头部要引入命名空间1% Import NamespaceSystem.Web.Routing%2% Import NamespaceCombres%页面使用1% Import NamespaceCombres%2headrunatserver3titleUsing Combres/title4%WebExtensions.CombresLink(siteCss)%5%WebExtensions.CombresLink(siteJs)%6/head页面使用效果当页面中引用了很多个js、css文件时将都被合并成两个请求以达到减少HTTP请求的目的。

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

相关推荐

2025年Windows C++开发环境搭建：MSYS2 MinGW-w64与VSCode配置全攻略

Godot引擎体素模块入门：从零构建可编辑的3D体素世界

小心DataContractJsonSerializer和JavaScriptSerializer的内部实现差异

更多资讯

5 分钟部署 OpenClaw：从零到运行的完整流程（含 TaoToken 统一 Key 配置）

Linux自学第13天：系统管理与Shell脚本入门

3个核心步骤搞定灰烬攻略，实战项目避坑指南

基于mongoose + MFC 搭建本地HTTP服务器：TaoToken 统一 Key 接入与 curl 联调配置

3步搞定dc电源线选型，这份速查手册让项目不再翻车

三国志13下载报错多？一文搞懂5种方案

今日更新

2k显示屏性能优化踩坑：版本升级后API全变了，这份源码解析救了我

3步搞定美眉图实战项目，告别官方文档抓不住重点

3步搞定黄金大劫案项目搭建从入门到精通

本周精选

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？