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 相关文章推荐
javascript实现轮显新闻标题链接
Aug 13 Javascript
js 字符串操作函数
Jul 25 Javascript
javascript 数组排序函数sort和reverse使用介绍
Nov 21 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
javascript self对象使用详解
Oct 18 Javascript
详解通过JSON数据使用VUE.JS
May 26 Javascript
微信小程序使用navigateTo数据传递的实例
Sep 26 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
js中对象和面向对象与Json介绍
Jan 21 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
原生JavaScript实现刮刮乐
Sep 29 Javascript
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中使用Oracle数据库(6)
2006/10/09 PHP
php数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
深入解析php中的foreach问题
2013/06/30 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
jquery实现居中弹出层代码
2010/08/25 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
了解JavaScript函数中的默认参数
2019/05/30 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
Python执行时间的计算方法小结
2017/03/17 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
Python requests获取网页常用方法解析
2020/02/20 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
实习生自荐信范文分享
2013/11/27 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL