ANT 压缩(去掉空格/注释)JS文件可提高js运行速度


Posted in Javascript onApril 15, 2013

1、说明在使用extjs 的时候,运行起来比较卡,特别是运行数据和js过多的时候,就会出现卡死的情况,或者等待时间比较长。
在解决这个有很多优化方法,今天来说其中一种,那就是在Ant脚本打包的时候,把js中空格、注释去掉、以及合并,合并今天不说了,还未实现这个,在研究中
2、首先,需要准备二个 .jar 文件,分别是 YUIAnt.jar 和 yuicompressor-2.4.x.jar 。
3、俩个文件的附件
下载地址
4、build.xml文件如下

<!-- JS压缩过程中的临时目录 --> 
<property name="jsDir" value="${basedir}/release/web/js" /> 
<!-- CSS压缩过程中的临时目录 --> 
<property name="cssDir" value="${basedir}/release/web/css" /> 
<!-- ext3 css压缩过程中的临时目录 --> 
<property name="cssExtDir" value="${basedir}/release/web/ext3" /> 
<!-- ext3 js压缩过程中的临时目录 --> 
<property name="extUxJsDir" value="${basedir}/release/web/ext3/ux" /> 
<!-- JS源文件 --> 
<property name="jsSourceDir" value="${webapp}/js" /> 
<!-- CSS源文件 --> 
<property name="cssSourceDir" value="${webapp}/css" /> 
<!-- Ext CSS源文件 --> 
<property name="cssExtSourceDir" value="${webapp}/ext3" /> 
<!-- Ext JS源文件 --> 
<property name="extUxJsSourceDir" value="${webapp}/ext3/ux" /> 
<!-- yui 依赖包 --> 
<path id="yuiClasspath"> 
<fileset dir="${basedir}"> 
<include name="metadata/tools/yui/yuicompressor-2.4.2.jar" /> 
<include name="metadata/tools/yui/YUIAnt-zh_CN.jar" /> 
</fileset> 
</path>

<!-- 开始压缩JS --> 
<target name="copy-web-depress-js" depends="init"> 
<delete dir="${basedir}/release/web" /> 
<copy todir="${basedir}/release/web"> 
<fileset dir="${webapp}"/> 
</copy> 
<taskdef name="uxJsCompress" classname="com.yahoo.platform.yui.compressor.YUICompressTask"> 
<classpath> 
<path refid="yuiClasspath" /> 
</classpath> 
</taskdef> 
<uxJsCompress linebreak="9000000" warn="false" charset="utf-8" encoding="utf-8" munge="yes" preserveallsemicolons="true" outputfolder="${extUxJsDir}"> 
<fileset dir="${extUxJsSourceDir}"> 
<include name="**/*.js" /> 
</fileset> 
</uxJsCompress> 
<taskdef name="yuicompress" classname="com.yahoo.platform.yui.compressor.YUICompressTask"> 
<classpath> 
<path refid="yuiClasspath" /> 
</classpath> 
</taskdef> 
<yuicompress linebreak="9000000" warn="false" charset="utf-8" encoding="utf-8" munge="yes" preserveallsemicolons="true" outputfolder="${jsDir}"> 
<fileset dir="${jsSourceDir}"> 
<include name="**/*.js" /> 
</fileset> 
</yuicompress> 
<taskdef name="cssYuicompress" classname="com.yahoo.platform.yui.compressor.YUICompressTask"> 
<classpath> 
<path refid="yuiClasspath" /> 
</classpath> 
</taskdef> 
<cssYuicompress linebreak="9000000" warn="false" charset="utf-8" encoding="utf-8" munge="yes" preserveallsemicolons="true" outputfolder="${cssDir}"> 
<fileset dir="${cssSourceDir}"> 
<include name="**/*.css" /> 
</fileset> 
</cssYuicompress> 
<taskdef name="cssExtYuicompress" classname="com.yahoo.platform.yui.compressor.YUICompressTask"> 
<classpath> 
<path refid="yuiClasspath" /> 
</classpath> 
</taskdef> 
<cssExtYuicompress linebreak="9000000" warn="false" charset="utf-8" encoding="utf-8" munge="yes" preserveallsemicolons="true" outputfolder="${cssExtDir}"> 
<fileset dir="${cssExtSourceDir}"> 
<include name="**/*.css" /> 
</fileset> 
</cssExtYuicompress> 
</target> 
<!-- 结束压缩JS -->

5、在这里说一点,在使用js压缩的时候YUIAnt.jar 是不支持utf-8字符集的。即
encoding="utf-8

下载地址
7、个人感受,在弄了很小半天,吧这个问题搞定了,自以为可以提高点js加载速度了,结果还是有点小慢,没有jquery那么的快,估计要用gzjs压缩才会变快点,现在我分析是的在IE下运行速度比较慢点,在firefox下比较快,看来还是每个模块加载的js有点多。
优化速度对比:
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Javascript 相关文章推荐
js实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 Javascript
JS变量及其作用域
Mar 29 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
vue用elementui写form表单时,在label里添加空格操作
Aug 13 Javascript
vue实现广告栏上下滚动效果
Nov 26 Vue.js
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 #Javascript
Extjs Gird 支持中文拼音排序实现代码
Apr 15 #Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 #Javascript
js作用域及作用域链概念理解及使用
Apr 15 #Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 #Javascript
jquery分页插件AmSetPager(自写)
Apr 15 #Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 #Javascript
You might like
php生成WAP页面
2006/10/09 PHP
php 过滤危险html代码
2009/06/29 PHP
PHP array_push 数组函数
2009/12/26 PHP
PHP 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
ajax 的post方法实例(带循环)
2011/07/04 PHP
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
php实现数字补零的方法总结
2018/09/12 PHP
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
浅谈JavaScript中this的指向更改
2020/07/28 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
详解在Python和IPython中使用Docker
2015/04/28 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
Python中如何引入第三方模块
2020/05/27 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
共产党员公开承诺书范文
2014/03/28 职场文书
班级读书活动总结
2014/06/30 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
正能量励志演讲稿三分钟(范文)
2019/07/11 职场文书