ASP.NET下使用Combres对JSCSS压缩合并和优化
Posted .net实用开发技能
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ASP.NET下使用Combres对JSCSS压缩合并和优化相关的知识，希望对你有一定的参考价值。
基于对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 如：
复制代码
<?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. 在需要的页面添加引用：
复制代码
<%@ 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：
复制代码
@using Combres.Mvc;
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
@Html.CombresLink("siteCss")
@Html.CombresLink("siteJs")
</head>
复制代码
note:引用JS CSS参数保持和Combres.xml一致
以上是关于ASP.NET下使用Combres对JSCSS压缩合并和优化的主要内容，如果未能解决你的问题，请参考以下文章
java Web程序使用wro4j合并压缩jscss等静态资源
使用 HttpClient 压缩对 asp.net core 2 站点的请求的最佳方法是啥？
在ASP.NET MVC中，使用Bundle来打包压缩js和css
asp.net mvc 应用Bundle（捆绑和微小）压缩技术 启用 BundleConfig 配置web.config