Kevin Cheng's Yard
电脑是我的老婆,编程是我的灵魂,代码是我的语言,按键是我在歌唱。
随笔- 54  文章- 0  评论- 249 
博客园  首页  新随笔  联系  管理  订阅 订阅

基于 aspnet 的自动合并输出js和css的解决方案

这是一个基于 aspnet 的自动合并输出js和css的解决方案。


首先感谢 LoveCherry 的文章《httpmodule和httphandler配合的又一应用——合并脚本样式》(http://www.cnblogs.com/lovecherry/archive/2010/04/01/1701997.html),我是在这篇文章的基础上进行修改的,令这个模块更为实用,我做了以下修改:
    ·简化tag的写法,统一用 <link runat="server" type="..." src="..."/>来表示资源
    ·修正js和css生成顺序问题,原代码中资源合并由于是异步的,其生成顺序是不一定的,是会出错的
    ·增加group属性,资源不一股脑的直接输出,避免字符集不一致和超大文件的产生问题
    ·增加merge属性,可控制单个资源是否需要合并输出
    ·增加压缩选项,可压缩后输出css和js文本
    ·一些类名项目名的调整和简化

具体代码就不说明了,大家下载去看便是。以下是使用说明:

------------------------------------------------------------
使用说明
------------------------------------------------------------
(1)引用数据集
    ResourceMerge.dll
    如果需要启用压缩的话,还需要引用:
    Yahoo.Yui.Compressor.dll
    EcmaScript.NET.modified.dll
   
(2)修改 web.config

    <appSettings>
      
<add key="ResourceMergeCompress" value="true" />
    
</appSettings>
    
<system.web>
      
<httpModules>
        
<add name="ResourceMergeModule" type="ResourceMerge.ResourceMergeModule, ResourceMerge"/>
      
</httpModules>
      
<httpHandlers>
        
<add path="ResourceMergeHandler.ashx" type="ResourceMerge.ResourceMergeHandler, ResourceMerge" verb="GET,HEAD"/>
      
</httpHandlers>
    
</system.web>

 

(3)使用link标签引用资源
    css资源
        <link runat="server" type="text/css" src='content/app.css' />
        原有的<link>标签统统不用改变了,只需要加上runat="server"属性。
        事实上,若该link标签在<head runat="server">内部的话,runat="server"也可不用加了。
    js 资源
        <link runat="server" type="text/javascript" href="content/jquery-1.4.2.min.js" />
        也使用<link>标签,唯一的区别在于 type="text/javascript"
        此外,可以用 href 或 src 表示资源来源
    附加属性
        group  : 同组的js或者css是合并输出的,以避免字符集不一致或超大文件产生的问题
        merge: true 或 false,表示是否将该资源合并输出

 

------------------------------------------------------------
示例
------------------------------------------------------------
masterpage, page, ascx 中用以下标签

    <link runat="server" type="text/css" group="basic" src="content/grid.css" />
    
<link runat="server" type="text/css" group="basic" src='content/define.css' />
    
<link runat="server" type="text/css" src='content/app.css' />
    
<link runat="server" type="text/javascript" group="jquery" src="content/jquery-1.4.2.min.js" />
    
<link runat="server" type="text/javascript" group="jquery" src="content/jquery.media.js"/>
    
<link runat="server" type="text/javascript" group="jquery" src="content/jquery.metadata.js" />
    
<link runat="server" type="text/javascript" group="jquery" src="content/jquery.bgiframe.js" />
    
<link runat="server" type="text/javascript" src="content/json2.js" />
    
<link runat="server" type="text/javascript" src="content/swfobject.js' />
    ...

 

以上的标签可能会生成以下代码,将资源合并输出,有效的减少了请求数目:

   <link href="/ResourceMergeHandler.ashx?type=css&amp;key=A176D36015E217C4503FA63B2176B078" rel="stylesheet" type="text/css"/>
   
<link href="/ResourceMergeHandler.ashx?type=css&amp;key=925F680A7156EF593595248981518ADB" rel="stylesheet" type="text/css"/>
   
<script src="/ResourceMergeHandler.ashx?type=js&amp;key=CC2081A83FC0CD8F0B6D6E26F81019FA" type="text/javascript"></script>
   
<script src="/ResourceMergeHandler.ashx?type=js&amp;key=A6DFEB50FB9BE04E83AB2D17A1709F16" type="text/javascript"></script>

 

   
------------------------------------------------------------
备注
------------------------------------------------------------
说明
    ·同组的js或者css是合并输出的,以上代码js分两组(jquery, default),css分两组(basic, default)
    ·同组内的字符编码自己负责,不一致的话生成的js代码可能会出错
    ·生成的顺序和标签的顺序是一致的
    ·可压缩输出合并的资源

 

关于标签的选择
    前一个版本是统一使用<src> 标签来描述资源的,发现在实际使用中改动过大。
    故改变思路,看能否在最小改动的前提下自动实现资源合并输出的功能。
    (1)css很容易,直接用<link>标签,完全不需变动。在module代码中可以用 HtmlGenericControl获取。
    (2)js则有点麻烦
        若加上runat="server"属性,则aspnet会认为这是服务器端脚本,页面输出直接截止了。
        若不加runat属性,aspnet会将该标签和其它文本一起解析为LiteralControl,很难拆分出来。
        故没法保留原有的script标签,最简单的考虑就是改为link标签,这样改动的代码量小些。

 

另外一个问题,css文件中若使用了相对图像路径,合并css的话会导致无法找到图片的问题。暂时有以下几个解决方案:
    (1)css文件中改为使用绝对图像路径。
    (2)使用 merge="false" 属性,跳过该css资源不做合并处理

 

 

 

转载请注明出处:http://surfsky.cnblogs.com 

绿色通道:好文要顶关注我收藏该文与我联系
posted @ 2010-12-01 18:00 Kevin Cheng 阅读(446) 评论(3) 编辑 收藏
发表评论
2241245
 回复 引用 查看   
#1楼2011-01-29 00:05 | 木子博客      
呃,下了你的代码,有些问题噢,如果head里有<%%>就会出错了。
 回复 引用 查看   
#2楼[楼主]2011-02-14 15:26 | Kevin Cheng      
那不是我的问题咯,是aspnet的问题,aspnet webform的head 也是runat=server的,如果在head中使用<%%>就会报错的
 回复 引用 查看   
#3楼2011-11-11 15:24 | oceansblue      
js文件里的中文出现乱码,看代码中:
item.Content = e.Result; // 这里要做一下字符编码处理
不知怎样处理,
加了,wc.Encoding = Encoding.UTF8;,还是不行,js文件默认就是utf-8,为什么会乱码呢?

注册用户登录后才能发表评论,请 登录 或 注册,返回博客园首页。
首页博问闪存新闻园子招聘知识库
最新IT新闻:
· 谷歌将出售Clearwire股份 不到收购价1/10
· 为什么Google比苹果更令微软恐惧?
· 思科拟2.71亿美元收购私有公司Lightwire
· 社交商务公司Bazaarvoice将于2月24日进行IPO
· 戴尔收购备份软件公司AppAssure
» 更多新闻...
最新知识库文章:
· 领域模型管理与AOP
· 编程的艺术:漂亮的代码和漂亮的软件
· GIT分支管理是一门艺术
· 编程:是一门艺术
· 编程是一门艺术吗?
» 更多知识库文章...

China-pub 2011秋季教材巡展
China-Pub 计算机绝版图书按需印刷服务
Copyright ©2012 Kevin Cheng
精于斯,乐于斯。
昵称:Kevin Cheng
园龄:6年3个月
粉丝:20
关注:1
<2010年12月>
日一二三四五六
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678

搜索

 
 

常用链接

  • 我的随笔
  • 我的评论
  • 我的参与
  • 最新评论
  • 我的标签
  • 更多链接

我的标签

  • Rss RssItem RssChannel XmlSerializer(1)
  • MVC ASP.NET Razor(1)
  • MVC Razor ASP.NET(1)
  • MVC ASP.NET(1)
  • javascript oo 类 对象 命名空间(1)
  • ASP.NET MVC SKIN 换肤(1)
  • Silverlight WPF(1)

随笔分类

  • 日子(3)
  • .NET(14)
  • .NET组件控件(15)
  • IT新闻(1)
  • 报表开发(1)
  • 代码生成器(1)
  • 工作流引擎
  • 建模与快速开发 (5)
  • 数据库 (4)
  • 杂项(7)

随笔档案

  • 2010年12月 (1)
  • 2010年11月 (1)
  • 2010年10月 (6)
  • 2010年8月 (7)
  • 2010年6月 (3)
  • 2009年12月 (1)
  • 2009年11月 (2)
  • 2009年5月 (2)
  • 2008年12月 (1)
  • 2008年8月 (1)
  • 2008年7月 (1)
  • 2007年12月 (1)
  • 2007年6月 (1)
  • 2007年5月 (1)
  • 2007年3月 (2)
  • 2007年1月 (1)
  • 2006年12月 (1)
  • 2006年11月 (1)
  • 2006年10月 (1)
  • 2006年9月 (1)
  • 2006年8月 (3)
  • 2006年6月 (5)
  • 2006年3月 (2)
  • 2006年2月 (1)
  • 2005年12月 (7)

文章分类

  • .NET(1)

相册

  • 回忆

Blogs

  • DbToCode
  • RapidTier
  • SmartPersistenceLayer
  • 灵感之源

NET WebSite

  • ASP.NET
  • CodeProject
  • CSDN
  • GoDotNet
  • MSDN
  • SourceForge

Special

  • icsharpcode.com
  • Open License
  • Python

最新评论

阅读排行榜

评论排行榜

推荐排行榜