[转]基于 aspnet 的自动合并输出js和css的解决方案
2011-10-24 12:37
309 查看
这是一个基于 aspnet 的自动合并输出js和css的解决方案。
首先感谢 LoveCherry 的文章《httpmodule和httphandler配合的又一应用——合并脚本样式》(/article/4594160.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&key=A176D36015E217C4503FA63B2176B078" rel="stylesheet" type="text/css"/>
<link href="/ResourceMergeHandler.ashx?type=css&key=925F680A7156EF593595248981518ADB" rel="stylesheet" type="text/css"/>
<script src="/ResourceMergeHandler.ashx?type=js&key=CC2081A83FC0CD8F0B6D6E26F81019FA" type="text/javascript"></script>
<script src="/ResourceMergeHandler.ashx?type=js&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
首先感谢 LoveCherry 的文章《httpmodule和httphandler配合的又一应用——合并脚本样式》(/article/4594160.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&key=A176D36015E217C4503FA63B2176B078" rel="stylesheet" type="text/css"/>
<link href="/ResourceMergeHandler.ashx?type=css&key=925F680A7156EF593595248981518ADB" rel="stylesheet" type="text/css"/>
<script src="/ResourceMergeHandler.ashx?type=js&key=CC2081A83FC0CD8F0B6D6E26F81019FA" type="text/javascript"></script>
<script src="/ResourceMergeHandler.ashx?type=js&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
相关文章推荐
- 基于 aspnet 的自动合并输出js和css的解决方案
- 基于 aspnet 的自动合并输出js和css的解决方案
- 仿淘宝 css,js 等静态资源合并压缩输出的 jsp 脚本 combo.jsp
- 多个css、js文件自动合并、压缩在线工具
- gulp最佳实践(包含js,css,html预编译,合并,压缩,浏览器自动刷新)
- 基于JS和CSS的自动关闭动态提示框
- 合并多个css或js请求 来加快页面加载速度
- Asp.net MVC WEB 优化之 - js、css动态合并 动态压缩
- Asp.net程序优化js、css实现合并与压缩的方法
- 灰常强大— EclipseHTML/JS/CSS/JS 代码自动提示
- 在OpenResty中使用淘宝的concat进行css和js合并,同时支持GZIP静态压缩
- 前端构建工具- gulp - 安装及简单CSS,JS文件合并压缩
- Asp.net MVC下使用Bundle合并、压缩js与css文件详解
- [前端优化]使用Combres合并对js、css文件的请求
- apache模块 合并多个js/css 提高网页加载速度
- grunt合并压缩js、css文件
- 使Eclipse下支持编写HTML/JS/CSS/JSP页面的自动提示
- ASP.NET MVC4细嚼慢咽---(5)js css文件合并
- sublime text 3 在写 css 时自动提示类名的解决方案
- 合并多个js,css文件的方法 - 在服务端合并和压缩JavaScript和CSS文件