ANT 压缩(去掉空格/注释)JS文件可提高js运行速度

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有点多。
优化速度对比:

(0)

相关推荐

  • angularjs客户端实现压缩图片文件并上传实例

    主要是利用html5的canvas来进行图片的压缩,然后转化为dataURL,再有dataURL转化为Blob文件,Blob对象可以直接赋值给Formdata. app.service('Util', function($q) { var dataURItoBlob = function(dataURI) { // convert base64/URLEncoded data component to raw binary data held in a string var byteString

  • IIS7下js文件启用Gzip后却不压缩的解决方法

    IIS7已经启用静态文件压缩(Gzip)但是死活不压缩,查找后发现是II7下MIME类型设置问题 将.js的MIME类型设置为application/javascript 再查看页面,已经启用了Gzip. 不过,几个天后又发现有的js文件被压缩,有的却没有 查找原因发现是引用js文件是没有设置type <script></script> <script src="A.js"></script> 加上type="text/java

  • 小心!AngularJS结合RequireJS做文件合并压缩的那些坑

    在项目使用了AngularJS框架,用RequireJS做异步模块加载(AMD),在做文件合并压缩时,遇到了一些坑,有些只是解决了,但不明白原因. 那些坑 1. build.js里面的paths必须跟main.js里面的保持一致. 这个build.js就是r.js使用的配置文件,而main.js就是RequireJS的main文件.在合并压缩时候,build.js文件里面也需要写paths,而且还是跟main.js一样,我很奇怪为什么就不能识别main里面的require.config的path

  • Python格式化压缩后的JS文件的方法

    本文实例讲述了Python格式化压缩后的JS文件的方法.分享给大家供大家参考.具体分析如下: 该脚本可以把压缩后的js文件格式上进行些还原,当然不会百分百完美,暂不处理语法问题,只是为了方便阅读js代码 lines = open("unformated.js").readlines()[0].split(";") #一般压缩后的文件所有代码都在一行里 #视情况设定索引,我的情况时第0行是源代码. indent = 0 formatted = [] for line

  • php使用gzip压缩传输js和css文件的方法

    本文实例讲述了php使用gzip压缩传输js和css文件的方法.分享给大家供大家参考.具体如下: <?php /** * 完整调用示例: * 1.combine.php?t=j&b=public&fs=jslib.jquery,function * * 该例子调用的是网站根目录下的public/jslib/jquery.js和public/function.js * * 2.combine.php?t=j&fs=jslib.jquery,function * * 该例子调用的

  • php实现压缩多个CSS与JS文件的方法

    本文实例讲述了php实现压缩多个CSS与JS文件的方法.分享给大家供大家参考.具体实现方法如下: 1. 压缩css 复制代码 代码如下: <?php    header('Content-type: text/css');    ob_start("compress");    function compress($buffer) {        /* remove comments */        $buffer = preg_replace('!/\*[^*]*\*+(

  • 使用GruntJS链接与压缩多个JavaScript文件过程详解

    自己写了个简单的HTML5 Canvas的图表库,可以支持饼图,折线图,散点图,盒子图 柱状图,同时支持鼠标提示,绘制过程动画效果等.最终我想把这些多个JS文件变成 一个JS文件发布出去,于是我的问题来啦,怎么把这些JS文件搞成一个啊,群里有个 朋友告诉我,GruntJS – JavaScript多文件编译,风格检查,链接与压缩神器.Google了一 把终于帮我完成这个任务,算是入门,分享一下过程. 一什么是GruntJS 不想翻译英文,自己看它的网站吧->http://gruntjs.com/

  • GitHub上一些实用的JavaScript的文件压缩解压缩库推荐

    项目里要用到archive和unarchive整个已存在的folder,在找解决方案的时候尝试了一些当前比较流行的library,主要有adm-zip, JSZip, archiver等. 一.Use adm-zip adm-zip支持archive和unarchive一个或多个文件或者整个文件夹的功能,使用非常的简单方便. var adm_zip = require('adm-zip'); //creating archives var zip = new adm_zip(); zip.add

  • ANT 压缩(去掉空格/注释)JS文件可提高js运行速度

    1.说明在使用extjs 的时候,运行起来比较卡,特别是运行数据和js过多的时候,就会出现卡死的情况,或者等待时间比较长. 在解决这个有很多优化方法,今天来说其中一种,那就是在Ant脚本打包的时候,把js中空格.注释去掉.以及合并,合并今天不说了,还未实现这个,在研究中 2.首先,需要准备二个 .jar 文件,分别是 YUIAnt.jar 和 yuicompressor-2.4.x.jar . 3.俩个文件的附件 下载地址 4.build.xml文件如下 复制代码 代码如下: <!-- JS压缩

  • js文件中调用js的实现方法小结

    方法一: Js_file01.js ======== 复制代码 代码如下: //程序代码 document.write(" <script language=\"javascript\" src="\/com\/ Js_file02.js \" > <\/script>"); 方法二: html代码 程序代码 复制代码 代码如下: <html> <body> <input type="

  • node下使用UglifyJS压缩合并JS文件的方法

    现在UglifyJS的最新版本为 2.8.13,主要功能为JS的压缩和合并,下面直接进入教程: 安装: <span style="font-size:18px;color:#006600;">npm install uglify-js -g</span> 将uglifyjs安装为全局变量,方便我们在任何地方使用. <span style="color:#006600;">下面是shell命令的中文解释: * source-map

  • Yii安装EClientScript插件扩展实现css,js文件代码压缩合并加载功能

    本文实例讲述了Yii安装EClientScript插件扩展实现css,js文件代码压缩合并加载功能.分享给大家供大家参考,具体如下: 扩展插件下载地址,解压后复制到/protected/vendor/ https://github.com/muayyad-alsadi/yii-EClientScript main配置文件配置插件,components里面增加 //js,css代码压缩,合并 'clientScript' => array( 'class' => 'application.ven

  • Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果(附demo源码下载)

    本文实例讲述了Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果的方法.分享给大家供大家参考,具体如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Text; using System.IO; public partial

  • jquery及js实现动态加载js文件的方法

    本文实例讲述了jquery及js实现动态加载js文件的方法.分享给大家供大家参考,具体如下: 问题: 如果用jquery append直接加载script标签的话,会报错的.除了document.write外,还有没有其他的比较好的动态加载js文件的方法. 解决方法: 1.jquery方法 $.getScript("./test.js"); //加载js文件 $.getScript("./test.js",function(){ //加载test.js,成功后,并执

  • 不使用script导入js文件的几种方法

    方法一:原生 adc.js内容如下: var hello = "H9"; html.html <script> var s = document.createElement("script"); s.src = "abc.js"; document.head.appendChild(s); s.addEventListener("load",function(){ // 等待s的load事件加载完响应,防止未加载完

  • 把js文件编译成dll供页面调用的方法

    1. 在解决方案中添加一个项目:JSControl 2. 在这个项目添加一个js文件(JScript1.js) 脚本的内容: function showAlert(){ alert('Today is a good dary'); } 3. 改变JScript1.js的属性,Build Action为Embedded Resource(嵌入的资源) 4. 在JSControl项目的AssemblyInfo.cs文件中添加一行:(注意JSControl.JScript1.js,JSControl是

  • 利用jQuery的deferred对象实现异步按顺序加载JS文件

    前段时间看了阮一峰的jQuery的deferred对象详解一文,对jQuery中的deferred的用法了一些了解,今天看到园子里的一篇文章:关于重构JS前端框架的失败经验(顺便怀念那些死去的代码),于是把我之前写的一个利用jQuery的deferred异步按顺序加载JS文件方案分享出来,欢迎指正. 如果你现在对jQuery中的deferred还不了解,强烈建议你看一下阮一峰的jQuery的deferred对象详解一文. 加载JS文件的代码如下: 复制代码 代码如下: /* Loading Ja

  • JS 文件本身编码转换 图文教程

    在百度.谷歌上一搜,大家都是说通过JAVA后台处理来解决编码问题,试问,这样能解决JS文件本身的编码问题吗? 之所以提出JS文件本身编码问题,是因为JS文件的编码不同,造成了中文显示为乱码. 通常,在Eclipse中建立一个JS文件(含有中文),在Eclipse的编辑器中看到的中文都很正常,但是显示在网页上就是乱码,而我的页面全部都是采用UTF-8编码进行编码的,为此,我想到了,这可能是JS文件本身编码问题造成的. 在Eclipse中,JS文件中的中文显示正常 在网页中,中文却显示为乱码 我想到

随机推荐