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 相关文章推荐
超简单的jquery的AJAX用法
May 10 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 Javascript
JavaScript基于ajax编辑信息用法实例
Jul 15 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
javascript简单实现等比例缩小图片的方法
Jul 27 Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 Javascript
Vue中使用vux的配置详解
May 05 Javascript
JavaScript生成简单等差数列
Nov 28 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
vue 通过base64实现图片下载功能
Dec 19 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开发GUI
2006/10/09 PHP
多php服务器实现多session并发运行
2006/10/09 PHP
笑谈配置,使用Smarty技术
2007/01/04 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
php表单处理操作
2017/11/16 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
2013/06/06 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
Python基于twisted实现简单的web服务器
2014/09/29 Python
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
python制作抖音代码舞
2019/04/07 Python
python中update的基本使用方法详解
2019/07/17 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
Python如何实现爬取B站视频
2020/05/20 Python
Oracle性能调优原则
2012/05/03 面试题
2019年.net常见面试问题
2012/02/12 面试题
员工考核管理制度
2014/02/02 职场文书
酒店总经理岗位职责
2014/03/17 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
代办委托书怎样写
2014/04/08 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL
基于Python实现西西成语接龙小助手
2022/08/05 Golang