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来实现动画导航效果的代码
Dec 16 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
这些年、我收集的JQuery代码小结
Aug 01 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
jquery删除数组中重复元素
Dec 05 Javascript
Bootstrap Table使用整理(一)
Jun 09 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
Vue 实例中使用$refs的注意事项
Jan 29 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使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
限制复选框的最大可选数
2006/07/01 Javascript
JavaScript 中的replace方法说明
2007/04/13 Javascript
学习ExtJS table布局
2009/10/08 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
用python删除java文件头上版权信息的方法
2014/07/31 Python
Python易忽视知识点小结
2015/05/25 Python
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
python3图片文件批量重命名处理
2019/10/31 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
python统计文章中单词出现次数实例
2020/02/27 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
全球性的在线商店:Vogca
2019/05/10 全球购物
销售总监工作职责
2013/11/21 职场文书
市场营销职业生涯规划书范文
2014/01/12 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
优秀大学生事迹材料
2014/12/24 职场文书
基层党支部承诺书
2015/04/30 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫