[前端优化]使用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配置节下添加
在configuration配置节下添加Combres配置文件的路径,此文件的作用我们下面再说。
配置好了后应该像这样
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的节点
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文件。
添加如下格式的配置文件。
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
具体添加压缩方法的配置节点,用于选择哪种方法对资源文件进行压缩
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上添加相应的属性即可,配置后像下面这样
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中添加加载的方法即可
2{
3 RouteTable.Routes.AddCombresRoute("Combres Route");
4 }
记得在Global.ascx的头部要引入命名空间
2<%@ 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/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
转载于:https://blog.51cto.com/rmlifejun/1275054
[前端优化]使用Combres合并对js、css文件的请求相关推荐
- 合并多个js,css文件的方法:在服务端合并js和css文件
合并所有的js和css文件可以减少HTTP请求,这样能提升访问速度. 通常为了开发的方便,我们会把js按用途分类,这样就会有很多js文件,比如sablog的jscript文件夹里就有10几个文件,这样 ...
- YUI Compressor插件压缩后war中的js/css文件未压缩的解决方法(被maven打包顶替了)
YUI Compressor Maven插件可以压缩/合并js或css文件,经常用在Maven项目中,但最近发现在wabapp中执行了 mvn install 命令进行发布之后,终端中显示插件已经执行 ...
- Nginx相关 解决nginx反向代理后页面上的js/css文件无法加载
解决nginx反向代理后页面上的js/css文件无法加载 location ~ \.php$ {proxy_pass http://127.0.0.1:8000;include naproxy.con ...
- yii2 asset.php,Yii2中使用asset压缩js,css文件的方法_php实例
官网文档 http://www.yiiframework.com/doc-2.0/guide-structure-assets.html yii目录下运行 asset/template assets. ...
- Nginx 环境下php web服务解决多接口和找不到js,css文件问题
nginx 下搭建多个服务 区分端口 查找nginx服务进程pid ps -ef | grep nginx root 4572 9396 0 18:53 pts/40 00:00:00 grep ng ...
- Xcode工程加载H5本地文件 H5里面引入js/css文件
在本地的H5项目里面,还有js/css文件,使用WKWebview怎么样把H5界面加载出来? 首先把H5项目文件夹拷贝到Xcode项目下 在Xcode里面,显示是绿色的文件夹,而不是黄色的文件夹. 然 ...
- [前端优化]使用Microsoft Ajax Minifier对资源文件进行压缩优化
在前端优化中,js.css等文件的优化一般都是压缩的优化,进行合并.减小体积以达到减小请求的目的. 今天发现了一个集成在VS中的压缩插件,使得压缩变得比较快捷. 配置方法 首先需要去下载Microso ...
- php 压缩js css文件,PHP实现动态压缩js与css文件的方法
本文实例讲述了PHP实现动态压缩js与css文件的方法.分享给大家供大家参考,具体如下: 正式发布产品时,我们希望将项目里的js,css合并压缩,以减少http请求.防止轻易查看源代码. 使用 只需要 ...
- 解释大型网站js,css文件后面为什么有参数?
1. <script type="text/javascript" src="base.js?1217128319"></script> ...
最新文章
- 电脑主板维修_自学电脑主板维修第45讲
- 分析 H.265 + AAC 的 FLV 文件
- 【干货】2015,后微信时代的社交产品市场展望
- 【XSY3048 】Polynominal 数学
- 某计算机系统20位地址线 8位数据线,同济大学2009-2010(1)微机原理期终考试试题(B卷)...
- php 织梦模板 防盗,织梦DedeCMS模板怎么防盗
- vue 动态加载图片路径报错解决方法
- marathon传参一
- 多线程,多进程使用场景
- 读书笔记—中国跑步指南
- pdf打不开无法启动计算机丢失,电脑打开PDF文档时发生错误文件已损坏怎么修复...
- 深度学习为什么会出现validation accuracy大于train accuracy的现象?
- Gym - 100886D 2015-2016 Petrozavodsk Winter Training Camp, Saratov SU Contest D - Catenary
- iOS:DES加密iOS和Android的匹配
- wordpress中Google Map V3 for IDN 插件的使用
- 3万字智慧工业园区整体解决方案
- VB standard-module bas文件 调用
- 第六届全国工业互联网数据创新应用大赛:工业生产反应装置的建模预测【天池】
- 【医学图像处理】1 (医学)图像及图像处理流程
- 信息奥赛c语言,信息学奥赛NOI/NOIP
热门文章
- spring-boot-devtools 热部署
- Laravel核心解读--服务提供器(ServiceProvider)
- ai的预览模式切换_深耕基础办公领域,永中软件云端远程办公新模式助力企业复工复产...
- hadoop使用combiner合并操作
- python常见排序算法解析
- 每日一道shell练习(09)——sed处理
- leetCode 110. Balanced Binary Tree 平衡二叉树
- UIButton在不同状态下显示不同背景色
- MongoDB副本集成员状态
- (一)加法计算器(第一个iOS APP)