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下利用arguments实现string.format函数
Aug 24 Javascript
VBS通过WMI监视注册表变动的代码
Oct 27 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
javascript实现iframe框架延时加载的方法
Oct 30 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
详解JavaScript的内置对象
Dec 07 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
JS代码触发事件代码实例
Jan 02 Javascript
JS实现九宫格拼图游戏
Jun 28 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
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
Symfony2学习笔记之模板用法详解
2016/03/17 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
DOM精简教程
2006/10/03 Javascript
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
python3实现ftp服务功能(客户端)
2017/03/24 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
Python正则表达式学习小例子
2020/03/03 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
selenium+python自动化78-autoit参数化与批量上传功能的实现
2021/03/04 Python
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
汽车技术服务英文求职信范文
2014/01/02 职场文书
安全生产计划书
2014/05/04 职场文书
民政局标准版离婚协议书
2014/12/01 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js