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 相关文章推荐
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
BootStrap下jQuery自动完成的样式调整
May 30 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 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
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
解析php中curl_multi的应用
2013/07/17 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
Python实现学校管理系统
2018/01/11 Python
python 2.7.14安装图文教程
2018/04/08 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
Java中的基本数据类型所占存储空间大小固定的吗
2012/02/15 面试题
建筑工程专业学生的自我评价
2013/12/25 职场文书
奥巴马就职演讲稿
2014/05/15 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
付款承诺函范文
2015/01/21 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
golang正则之命名分组方式
2021/04/25 Golang