代码改变世界

ASP.NET下使用Combres对JS、CSS合并和优化

2013-04-03 16:58  时空印记  阅读(3208)  评论(3)  编辑  收藏  举报

基于对JS和CSS合并和压缩： JAVA下有YUI Combo Handler，PHP 下有 Minify , .Net环境下有Combres。  

Combres 是一个 ASP.NET 网站的客户端资源js,css的压缩，合成和缓存库，基于Apache 2.0协议开源，最新版本是2.0。这个库同时支持WebForm和MVC，主要的特性如下：

  • 资源文件的组织,包括javascript和css文件的组织，每个都可以使用相同的配置或者使用不同的配置。
  • 可以在资源里完成精简，压缩，然后发送给浏览器，所有的这些资源只使用一个Http请求
  • 有一个可扩展的minification架构，开发人员可以选择关闭资源压缩的设置或选择其中一个内置的适配器，类库里带了3个适配器.NET YUI Compressor library, Microsoft Ajax Minifier library和Google Closure compiler service，配置都是通过XML文件进行，非常方便。
  • 对每个请求生成适当的ETag和Expires/Cache-Control 头，支持服务器端的缓存。
  • 和ASP.NET 路由引擎集成，所以对ASP.NET MVC 和ASP.NET WebForm的支持非常好。
  • 支持调试模式，调试的时候不缓存也不压缩，方便调试。

使用Combres步骤：

1. 在VS里面安装NuGet插件。

2. 在你的Web上右键打开 “管理NuGet程序包” ，找到Combres，选择安装后 会在你的项目中做如下修改：

  • 在Web.config中配置了Combres
  • 注册Combres路径（可查看生成的AppStart文件夹下面的Combres文件）
  • 在App_Data文件夹下生成了combres.xml 等相关的配置文件

3.（ASP.NET 4.0的忽略此步骤）如果是ASP.NET 3.5:

  • 删除生成的文件AppStart_Combres.cs
  • 删除引用组件WebActivator
  • 打开 global.asax 添加引用 using Combres; 在 RegisterRoutes() 或者Application_Start()下添加： RouteTable.Routes.AddCombresRoute("Combres");

4.编辑App_Data文件夹下生成的配置文件： combres.xml  添加所要用的JS 和 CSS 如：

View Code 
<?xml version="1.0" encoding="utf-8" ?>
<!--
  This file contains basic settings needed for most web apps.
  For full Combres settings (with explanation), refer to the sample definition file: combres_full_with_annotation.xml
  Also, refer to Combres' documentation: http://combres.codeplex.com/documentation    
-->
<combres xmlns='urn:combres'>
  <filters>
    <filter type="Combres.Filters.FixUrlsInCssFilter, Combres" />
  </filters>

 <!-- <cssMinifiers>
    <minifier name="yui" type="Combres.Minifiers.YuiCssMinifier,Combres">
      <param name="CssCompressionType" type="string" value="StockYuiCompressor" />
      <param name="ColumnWidth" type="int" value="-1" />
    </minifier>
  </cssMinifiers>
  <jsMinifiers>
    <minifier name="msajax" type="Combres.Minifiers.MSAjaxJSMinifier, Combres"  binderType="Combres.Binders.SimpleObjectBinder, Combres">
    </minifier>
  </jsMinifiers>-->
  
  <!--defaultDuration 默认缓存的时间，单位为天数-->
  <!--defaultVersion 合并后的资源版本，在你修改了资源文件后需要对版本进行修改，你可以指定auto或者手动设置一个版本号-->
  <!--defaultDebugEnabled 调试的模式，为true时那么资源文件不进行压缩，开发时可以设置成true，上线后设置成false-->
  <resourceSets url="~/combres.axd"
                defaultDuration="30"
                defaultVersion="auto"
                defaultDebugEnabled="false"
                defaultIgnorePipelineWhenDebug="true"
                localChangeMonitorInterval="30"
                remoteChangeMonitorInterval="60"
                >
    <resourceSet name="siteCss" type="css">
      <resource path="~/Styles/Admin.css" />
      <resource path="~/Scripts/jquery-easyui-1.3/themes/default/easyui.css" />
      <resource path="~/Scripts/jquery-easyui-1.3/themes/icon.css" />
    </resourceSet>

    <resourceSet name="siteJs" type="js">
      <resource path="~/Scripts/jquery-1.7.2.min.js" />
      <resource path="~/Scripts/jquery-easyui-1.3/jquery.easyui.min.js" />
      <resource path="~/Scripts/DropDownList.js" />
      <resource path="~/Scripts/GridviewStyle.js" />
    </resourceSet>

    <resourceSet name="subJs" type="js">
      <resource path="~/Scripts/adminInfo.js" />
      <resource path="~/Scripts/Validation.js" />
    </resourceSet>
  </resourceSets>
</combres>

5. 在需要的页面添加引用：

View Code 
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Admin.master.cs" Inherits="Web.Masters.Admin" %>
<%@ Import namespace="Combres" %>

<!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 id="Head1" runat="server">
    <title>Budget Management</title>
    <%= WebExtensions.CombresLink("siteCss") %>
    <%= WebExtensions.CombresLink("siteJs") %>
</head>
</html>

如果是MVC：

MVC 引用 
@using Combres.Mvc;
<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    @Html.CombresLink("siteCss")
    @Html.CombresLink("siteJs")
</head>

 

note:引用JS CSS参数保持和Combres.xml一致

 

附：纯手工单独配置Combres 可参考： [前端优化]使用Combres合并对js、css文件的请求