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

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

　配置组件

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

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

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

　　

　　首先配置下web.config。

　　在configSections配置节下添加：

     

 <configSections>
      <section name="combres" type="Combres.ConfigSectionSetting, Combres, Version=2.1.0.0, Culture=neutral, PublicKeyToken=1ca6b37997dd7536"/>
      <section name="rewriter" requirePermission="false" type="Intelligencia.UrlRewriter.Configuration.RewriterConfigurationSectionHandler, Intelligencia.UrlRewriter"/><!--url -->
<combres definitionUrl="~/combres.xml" logProvider="Combres.Loggers.Log4NetLogger" cacheProvider="Combres.Caches.AspNetResourceSetCache"/>
httpModules>
        <add name="UrlRoutingModule" type="System.Web.Routing.UrlRoutingModule, System.Web.Routing, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
      </httpModules>

新建combres.xml文件

<?xml version="1.0" encoding="utf-8" ?>
<combres xmlns='urn:combres'>
  <filters>
    <filter type="Combres.Filters.FixUrlsInCssFilter, Combres" />
    <filter type="Combres.Filters.DotLessCssFilter, Combres" acceptedResourceSets="dotLessCss" />
  </filters>
  <jsMinifiers>
    <minifier name="msajax" type="Combres.Minifiers.MSAjaxJSMinifier, Combres" binderType="Combres.Binders.SimpleObjectBinder, Combres">
      <param name="CollapseToLiteral" type="bool" value="true" />
      <param name="EvalsAreSafe" type="bool" value="true" />
      <param name="MacSafariQuirks" type="bool" value="true" />
      <param name="CatchAsLocal" type="bool" value="true" />
      <param name="LocalRenaming" type="string" value="CrunchAll" />
      <param name="OutputMode" type="string" value="SingleLine" />
      <param name="RemoveUnneededCode" type="bool" value="true" />
      <param name="StripDebugStatements" type="bool" value="true" />
    </minifier>
  </jsMinifiers>
  <resourceSets url="~/combres.axd"
                defaultDuration="30"
                defaultVersion="auto"
                defaultDebugEnabled="false"
                defaultIgnorePipelineWhenDebug="true"
                localChangeMonitorInterval="30"
                remoteChangeMonitorInterval="60"
                >
    <resourceSet name="cm1" type="js" minifierRef="default">
      <resource path="~/js/com.js" minifierRef="msajax"/>
    </resourceSet>
  </resourceSets>
</combres>
配置全局文件：Global.asax 
protected void Application_Start(object sender, EventArgs e)
        {
            RouteTable.Routes.AddCombresRoute("Combres");
        }

页面应用：

View Code 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Webs.aspx.cs" Inherits="WebCombres.Webs" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type="button" id="int1" value="On Click" onclick="a()" />
    </div>
    </form>
    <cb:Include ID="cbIn" runat="server" SetName="cm1"></cb:Include>
</body>
</html>

页面运行效果：

 <script type="text/javascript" src="/combres.axd/cm1/969703027/"></script>

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

posted @ 2011-02-24 10:26  nocallstyle  阅读(544)  评论(1)  编辑  收藏  举报