关于javascript 压缩

关于javascript 压缩


以下转自 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之后,只能导入ext-all.css或者一个个的导入需要的css(太麻烦),如果用到aero等风格,还得导入xtheme- aero.css,总下载大小为ext-all.css+xtheme-aero.css=58k+16k=76k,如果一个个导入仅用到的css,又要 多次http请求,本来Ext几百K的大小就让人担忧性能,再加上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" />

    ...
    <!-- 压缩并连结用到的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命令调用yuicompressor.jar,就是用java命令执行yuicomprossor.jar -->
        <!-- parallel="false":对fileset中的每个文件都执行一次executable参数的命令 -->
        <!-- dest="${css.ext}":命令执行目录 -->
        <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 />
            <!-- 每执行一次命令的输出文件为*-m.css,比如要压缩文件为tabs.css,则生成的压缩文件为tabs-m.css -->
            <mapper type="glob" from="*.css" to="*-m.css" />
        </apply>
        <!-- 以上动作相当于执行下列命令:
              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文件连结成一个文件 -->
        <!-- fixlastline="true":每个压缩文件在最后生成的文件中用换行来分割,即每个*-m.css在生成的ex-all.css中占一行。如果 用concat连结压缩的js文件,这个参数一定要加上,否则连结后的js文件可能运行错误 -->
        <concat destfile="${css.ext}/ext-all.css" fixlastline="true">
            <fileset dir="${css.ext}">
                <include name="*-m.css" />
            </fileset>
        </concat>
    </target>

</project>

 


本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/lvyuanfang/archive/2007/10/27/1849387.aspx


以下转自 (badqiu)http://badqiu.javaeye.com/blog/37176 

关于JavaScript的gzip静态压缩方法

传统的JS压缩(删除注释,删除多余空格等)提供的压缩率有时还是不尽不意,幸亏现在的浏览器都支持压缩传输(通过设置http header的Content-Encoding= gzip),可以通过服务器的配置(如apache)为你的js提供压缩传输,或是appfuse中使用的GZipFilter使tomcat也提供这种能力

现在的问题是这种动态的压缩会导致服务器CPU占用率过高,现在我想到的解决辨法是通过提供静态压缩(就是将js预先通过 gzip.exe压缩好)

一.下面描述在tomcat中的应用

1.将prototype.js通过 gzip.exe压缩保存成prototype. gzjs
2.设置header,我编写了一个简单的AddHeadersFilter来将所有以 gzjs结尾的文件增加设置header Content-Encoding= gzip
web.xml中的配置
Java代码
  1. <filter>   
  2.     <filter-name>AddHeaderFilter</filter-name>   
  3.     <filter-class>   
  4.         badqiu.web.filter.AddHeaderFilter   
  5.     </filter-class>   
  6.     <init-param>   
  7.         <param-name>headers</param-name>   
  8.         <param-value>Content-Encoding=gzip</param-value>   
  9.     </init-param>   
  10. </filter>   
  11.   
  12. <filter-mapping>   
  13.     <filter-name>AddHeaderFilter</filter-name>   
  14.     <url-pattern>*.gzjs</url-pattern>   
  15. </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是否正常的代码
  1. <html>   
  2. <head>   
  3. <!-- type="text/javascript"不可少,有些浏览器缺少这个不能运行,具体已经忘记了 -->   
  4. <script src="prototype.gzjs" type="text/javascript"></script>   
  5. </head>   
  6. <body>   
  7.     <input id="username" name="username" value="badqiu"/><br />   
  8.     <input id="email" value="[email protected]"/>   
  9. <script>   
  10.     <!-- 测试prototype的方法是否正常-->   
  11.     alert($F('username'))   
  12. </script>   
  13. </body>   
  14. </html>  
<html>
<head>
<!-- type="text/javascript"不可少,有些浏览器缺少这个不能运行,具体已经忘记了 -->
<script src="prototype.gzjs" type="text/javascript"></script>
</head>
<body>
<input id="username" name="username" value="badqiu"/><br />
<input id="email" value="[email protected]"/>
<script>
<!-- 测试prototype的方法是否正常-->
alert($F('username'))
</script>
</body>
</html>


在Apache httpd中可以直接通过在httpd.conf增加AddEncoding x- gzip . gzjs来映射. gzjs文件的header

二.相关压缩率数据
1. prototype.js 1.5.0_rc0原始大小56KB,未经任何处理直接使用 gzip压缩为12KB,总压缩率79%
2. 通过js压缩工具压缩过的protytype.js为20KB,使用 gzip压缩为10KB,总压缩率为83%
3. 实际项目中的多个js合并成的文件 439KB,直接通过 gzip压缩为85KB,总压缩率81%
4. 439KB经过js压缩为165KB,再经过 gzip压缩为65KB,总压缩率86%

基本上你都可以忽略js压缩工具的压缩率,直接使用 gzip压缩

gzip下载地址 http://www. gzip.org
tomcat的压缩配置示例下载地址: http://www.blogjava.net/Files/badqiu/gziptest.rar

你可能感兴趣的:(关于javascript 压缩)