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实例教程(19) 使用HoTMetal(7)
Dec 23 Javascript
用window.location.href实现刷新另个框架页面
Mar 07 Javascript
js textarea自动增高并隐藏滚动条
Dec 16 Javascript
JS 操作符整理[推荐收藏]
Nov 15 Javascript
javascript学习(二)javascript常见问题总结
Jan 02 Javascript
关于javaScript注册click事件传递参数的不成功问题
Jul 18 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
vue中的v-if和v-show的区别详解
Sep 01 Javascript
vue下的@change事件的实现
Oct 25 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 APP微信提现接口代码
2018/09/30 PHP
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
6行代码实现微信小程序页面返回顶部效果
2018/12/28 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
爬山算法简介和Python实现实例
2014/04/26 Python
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
Python 转换文本编码实现解析
2019/08/27 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
退学证明范本3篇
2014/10/29 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS