[转]基于 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
??????<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/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?
轉載于:https://www.cnblogs.com/greatwang/archive/2011/10/24/2648254.html
總結
以上是生活随笔為你收集整理的[转]基于 aspnet 的自动合并输出js和css的解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《大日经疏》勘误
- 下一篇： 从实例到数理来解析感知机学习算法(PLA