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 相关文章推荐
给moz-firefox下添加IE方法和属性
Apr 10 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
详解Angular 4.x Injector
May 04 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 Javascript
小程序实现tab标签页
Nov 16 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头像上传预览实例代码
2017/05/02 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
JS input 数字验证代码
2009/07/30 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
django框架创建应用操作示例
2019/09/26 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
Python调用JavaScript代码的方法
2020/10/27 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
英国航空官网:British Airways
2016/09/11 全球购物
一些高难度的SQL面试题
2016/11/29 面试题
应届护士推荐信
2013/11/16 职场文书
保安自我鉴定范文
2013/12/08 职场文书
班干部演讲稿
2014/04/24 职场文书
营运督导岗位职责
2015/04/10 职场文书
初中毕业生感言
2015/07/31 职场文书
2015年度女工工作总结
2015/10/22 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书