以下轉(zhuǎn)自 http://blog.csdn.net/lvyuanfang/archive/2007/10/27/1849387.aspx
用yuicompressor和Ant壓縮Ext的CSS文件
yuicompressor是YUI的Javascript和CSS壓縮工具,下載地址:http://developer.yahoo.com/yui/compressor/
使用Ext之后,只能導(dǎo)入ext-all.css或者一個個的導(dǎo)入需要的css(太麻煩),如果用到aero等風(fēng)格,還得導(dǎo)入xtheme- aero.css,總下載大小為ext-all.css+xtheme-aero.css=58k+16k=76k,如果一個個導(dǎo)入僅用到的css,又要 多次http請求,本來Ext幾百K的大小就讓人擔(dān)憂性能,再加上76k的css文件,瀏覽器肯定載入更慢了。。
Ext自帶的css源文件,除了ext-all.css之外都不是壓縮的。考慮用yuicompressor來壓縮用到的css文件,并用Ant將壓縮過 的css文件合并為一個文件。這里所說的方法同樣可以用于javascript的壓縮,yuicompressor支持對javascrip和css文件 的壓縮。
<project name="..." default="..." basedir=".">
...
<!-- yuicompressor.jar的引用,使用最新的版本2.2.5 -->
<property name="yuicompressor" value="tools/yuicompressor-2.2.5.jar" />
...
<!-- 壓縮并連結(jié)用到的ext的css文件 -->
<target name="compress-ext-css">
<!--Ext CSS樣式目錄-->
<property name="css.ext" value="WebRoot/css/ext" />
<!-- 刪除之前生成的已壓縮css文件 -->
<delete>
<fileset dir="${css.ext}">
<include name="*-m.css" />
<include name="ext-all.css" />
</fileset>
</delete>
<!-- 使用java命令調(diào)用yuicompressor.jar,就是用java命令執(zhí)行yuicomprossor.jar -->
<!-- parallel="false":對fileset中的每個文件都執(zhí)行一次executable參數(shù)的命令 -->
<!-- dest="${css.ext}":命令執(zhí)行目錄 -->
<apply executable="java" parallel="false" verbose="true" dest="${css.ext}">
<!-- 要壓縮的css文件 -->
<fileset dir="${css.ext}">
<include name="fonts-min.css" />
<include name="reset-min.css" />
<include name="core.css" />
<include name="tree.css" />
<include name="tabs.css" />
<include name="toolbar.css" />
<include name="button.css" />
<include name="basic-dialog.css" />
<include name="layout.css" />
<include name="xtheme-aero.css" />
</fileset>
<arg line="-jar" />
<arg path="${yuicompressor}" />
<arg value="-o" />
<targetfile />
<!-- 每執(zhí)行一次命令的輸出文件為*-m.css,比如要壓縮文件為tabs.css,則生成的壓縮文件為tabs-m.css -->
<mapper type="glob" from="*.css" to="*-m.css" />
</apply>
<!-- 以上動作相當(dāng)于執(zhí)行下列命令:
java -jar yuicompressor-2.2.5.jar -o fonts-min-m.css fonts.css
java -jar yuicompressor-2.2.5.jar -o reset-min-m.css reset.css
java -jar yuicompressor-2.2.5.jar -o core-m.css core.css
java -jar yuicompressor-2.2.5.jar -o tree-m.css tree.css
java -jar yuicompressor-2.2.5.jar -o tabs-m.css tabs.css
java -jar yuicompressor-2.2.5.jar -o toolbar-m.css toolbar.css
java -jar yuicompressor-2.2.5.jar -o basic-dialog-m.css basic-dialog.css
java -jar yuicompressor-2.2.5.jar -o layout-m.css layout.css
java -jar yuicompressor-2.2.5.jar -o xtheme-aero-m.css xtheme-aero.css
-->
<!-- 用Ant的concat動作將生成的壓縮css文件連結(jié)成一個文件 -->
<!-- fixlastline="true":每個壓縮文件在最后生成的文件中用換行來分割,即每個*-m.css在生成的ex-all.css中占一行。如果 用concat連結(jié)壓縮的js文件,這個參數(shù)一定要加上,否則連結(jié)后的js文件可能運(yùn)行錯誤 -->
<concat destfile="${css.ext}/ext-all.css" fixlastline="true">
<fileset dir="${css.ext}">
<include name="*-m.css" />
</fileset>
</concat>
</target>
</project>
本文來自CSDN博客,轉(zhuǎn)載請標(biāo)明出處:http://blog.csdn.net/lvyuanfang/archive/2007/10/27/1849387.aspx
傳統(tǒng)的JS壓縮(刪除注釋,刪除多余空格等)提供的壓縮率有時還是不盡不意,幸虧現(xiàn)在的瀏覽器都支持壓縮傳輸(通過設(shè)置http header的Content-Encoding=
gzip),可以通過服務(wù)器的配置(如apache)為你的js提供壓縮傳輸,或是appfuse中使用的GZipFilter使tomcat也提供這種能力
現(xiàn)在的問題是這種動態(tài)的壓縮會導(dǎo)致服務(wù)器CPU占用率過高,現(xiàn)在我想到的解決辨法是通過提供靜態(tài)壓縮(就是將js預(yù)先通過
gzip.exe壓縮好)
一.下面描述在tomcat中的應(yīng)用
1.將prototype.js通過
gzip.exe壓縮保存成prototype.
gzjs
2.設(shè)置header,我編寫了一個簡單的AddHeadersFilter來將所有以
gzjs結(jié)尾的文件增加設(shè)置header Content-Encoding=
gzip
web.xml中的配置
- <filter>
- <filter-name>AddHeaderFilter</filter-name>
- <filter-class>
- badqiu.web.filter.AddHeaderFilter
- </filter-class>
- <init-param>
- <param-name>headers</param-name>
- <param-value>Content-Encoding=gzip</param-value>
- </init-param>
- </filter>
-
- <filter-mapping>
- <filter-name>AddHeaderFilter</filter-name>
- <url-pattern>*.gzjs</url-pattern>
- </filter-mapping>
<filter>
<filter-name>AddHeaderFilter</filter-name>
<filter-class>
badqiu.web.filter.AddHeaderFilter
</filter-class>
<init-param>
<param-name>headers</param-name>
<param-value>Content-Encoding=gzip</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>AddHeaderFilter</filter-name>
<url-pattern>*.gzjs</url-pattern>
</filter-mapping>
測試prototype.js是否正常的代碼
- <html>
- <head>
- <!-- type="text/javascript"不可少,有些瀏覽器缺少這個不能運(yùn)行,具體已經(jīng)忘記了 -->
- <script src="prototype.gzjs" type="text/javascript"></script>
- </head>
- <body>
- <input id="username" name="username" value="badqiu"/><br />
- <input id="email" value="badqiu@gmail.com"/>
- <script>
- <!-- 測試prototype的方法是否正常-->
- alert($F('username'))
- </script>
- </body>
- </html>
<html>
<head>
<!-- type="text/javascript"不可少,有些瀏覽器缺少這個不能運(yùn)行,具體已經(jīng)忘記了 -->
<script src="prototype.gzjs" type="text/javascript"></script>
</head>
<body>
<input id="username" name="username" value="badqiu"/><br />
<input id="email" value="badqiu@gmail.com"/>
<script>
<!-- 測試prototype的方法是否正常-->
alert($F('username'))
</script>
</body>
</html>
在Apache httpd中可以直接通過在httpd.conf增加AddEncoding x-
gzip .
gzjs來映射.
gzjs文件的header
二.相關(guān)壓縮率數(shù)據(jù)
1. prototype.js 1.5.0_rc0原始大小56KB,未經(jīng)任何處理直接使用
gzip壓縮為12KB,總壓縮率79%
2. 通過js壓縮工具壓縮過的protytype.js為20KB,使用
gzip壓縮為10KB,總壓縮率為83%
3. 實際項目中的多個js合并成的文件 439KB,直接通過
gzip壓縮為85KB,總壓縮率81%
4. 439KB經(jīng)過js壓縮為165KB,再經(jīng)過
gzip壓縮為65KB,總壓縮率86%
基本上你都可以忽略js壓縮工具的壓縮率,直接使用
gzip壓縮
gzip下載地址
http://www.gzip.org
tomcat的壓縮配置示例下載地址:
http://www.tkk7.com/Files/badqiu/gziptest.rar