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 相关文章推荐
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
Sep 02 Javascript
微信小程序 image组件遇到的问题
May 28 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 Javascript
ES6 async、await的基本使用方法示例
Jun 06 Javascript
OpenLayers加载缩放控件使用方法详解
Sep 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
linux实现php定时执行cron任务详解
2013/12/24 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
详解JavaScript作用域 闭包
2020/07/29 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
python通过实例讲解反射机制
2019/10/17 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
解决Django no such table: django_session的问题
2020/04/07 Python
python3将变量输入的简单实例
2020/08/19 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
印度网上药店:1mg
2017/10/13 全球购物
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
长城导游词300字
2015/01/30 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
企业承诺书格式范文
2015/04/28 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
MySQL如何解决幻读问题
2021/08/07 MySQL
使用Python开发冰球小游戏
2022/04/30 Python