(转自)http://blog.csdn.net/ybygjy/article/details/6995435

简述

如果非常着急,这块可以跳过直接从约束条件开始也行。

JavaScript压缩这块需要权衡一下,压缩的成本会影响咱们自己的调试进度增加了编码、测试的负担,而的确给产品或用户带来了多一些的安全、性能上的提升。

参考ext、jquery等开源Java Script框架的风格,需要有两种JavaScript版本:

  1. 有一版是我们开发人员自己调试、开发用的
  2. 另一版则是被产品用的,这种方式下相应会增加我们测试的工作量

这种方式下如果现场出现问题我们解决的办法就是定位是哪个js文件,然后我们用开发版替换到压缩版,问题解决完毕后再把相应的开发版压缩成产品版。

具体实施

  1. 当JavaScript文件未使用OOP策略编写那么只需要针对这些JavaScript文件进行压缩就可以了。
  2. 如果JavaScript采用完成OOP策略编写的并且具有模块划分、继承层次结构其实就类似JavaScript开源项目,那么我们除了需要压缩JavaScript还需要把原始JavaScript依赖关系给提取出来。当客户端发起加载指定模块请求那么相应服务器就把与此模块相关的所有JavaScript全部合并起来并推送。

相关工具

  1. YUI Compressor
  2. Ant,利用Ant脚本对指定目录中的js压缩非常方便

约束条件

  1. 要求我们所有JavaScript文件编码方式为UTF-8,如果为其它编码方式将会出现无法预料的异常信息。
  2. 要求我们JavaScript存放目录的路径必须不含中文字符
  3. 要求机器上必须有Ant环境。

使用手册

请注意,原则上请不要修改build.xml文件,因为对build.xml中的配置项的修改会影响到我们整个JavaScript文件压缩管理逻辑。

  1. 首先修改build.properties文件中的内容
    1. compress.destdir,指定原始JavaScript目录路径
    2. compress.srcdir,指定压缩完成后的JavaScript文件存放路径,目录名必须是compjs且与compress.destdir指定的路径平级,见截图:

这里表示将项目相关的JavaScript文件压缩并转储到compjs目录下。

  1. 确认依赖的两个jar包和一个环境
    1. 一个环境,指的就是Ant环境,要确保ant环境是正常的版本在1.6.0以上就可以了
    2. 两个jar包,这两个jar包必须放在lib目录下(见下面的目录结构截图)

ant-contrib-1.0b3.jar,主要是Ant任务标签功能性增强。

yuicompressor-2.4.2.jar,是一个开源项目的结晶,我们使用它来完成JavaScript文件的压缩

  1. 目录结构截图

lib目录下存放有两个依赖的jar文件

  1. 请再次检查,我们程序目前不能支持文件路径为中文的情况,在内部变量正则匹配转换时会出现乱码现象
  2. 执行,这块就直接在CMD下敲ant -f build.xml就可以了,见截图:

这里还提示foreach标记过时的情况,有兴趣可以改一下

  1. 执行完成,执行完成后我们会在指定的输出目录中看到一堆层次分明与原始文件一一对应的JavaScript文件,见截图:

压缩前

压缩后

相信您一定可以从上图中发现不同之处。。。

其它

目前我们的这个工具也可以支持对HTML、CSS等类型文件的压缩,但此版本仅面向JavaScript,其实主要是依靠开源软件来完成的,我们只是做了一层简单的约束处理、批量化封装以让其更加适合我们。

目前不支持(缺陷)

  1. 压缩完成后我们还必须要求原始JavaScript文件必须保留
  2. 对目录中文路径问题存在bug,请不要使用中文路径
  3. 对compjs目录约束未实现自动处理

下载

  1. 文档下载地址

(转)JavaScript的压缩的更多相关文章

  1. 利用YaHoo YUI实现Javascript CSS 压缩 分类: C# 2014-07-13 19:07 371人阅读 评论(0) 收藏

    网站优化时,往往需要对js文件,css文件进行压缩,以达到减少网络传输数据,减少网页加载时间:利用YaHoo的YUI可以实现Javascript,CSS,压缩,包括在线的js压缩和程序压缩,发现C#也 ...

  2. [H5-Compress-Image]利用canvas实现 javascript 图片压缩处理_基于requirejs模块化的代码实现

    // 还存在有问题的代码,问题在于processFile()中// 问题:在ipone 5c 下,某些图片压缩处理后,上传到服务器生成的文件size为0,即是空白 ;define(['mod/tool ...

  3. 你想不到的压缩方法:将javascript文件压缩成PNG图像存储

    这样可以做到很高的压缩比,到底有多高,下面会提到.这种方法用到了 canvas 控件,这也意味着只有支持 canvas 控件的浏览器下才有效. 现在你可以看到,上面的图像类似一个噪声图像,但它实际上是 ...

  4. css javascript 自动化压缩(保存后即自动生成压缩文件)

    先上图:

  5. JavaScript混淆压缩

    比较好用的压缩软件,支持合并 JsCompressor-v3.0 比较好用的混淆站点:http://dean.edwards.name/packer/

  6. gzip压缩JavaScript

    为了提高客户端的体验效果,RIA开发逐渐兴起.这样会项目中会充斥的大量的JavaScript代码,与此同时会消耗客户端浏览器性能.对于 Ext 实现的 one page one application ...

  7. 使用GruntJS链接与压缩多个JavaScript文件

    使用GruntJS链接与压缩多个JavaScript文件 自己写了个简单的HTML5 Canvas的图表库,可以支持饼图,折线图,散点图,盒子图 柱状图,同时支持鼠标提示,绘制过程动画效果等.最终我想 ...

  8. Google Closure Compiler高级压缩混淆Javascript代码

    一.背景 前端开发中,特别是移动端,Javascript代码压缩已经成为上线必备条件. 如今主流的Js代码压缩工具主要有: 1)Uglify http://lisperator.net/uglifyj ...

  9. CSS, JavaScript 压缩, 美化, 加密, 解密

    CSS, JavaScript 压缩, 美化, 加密, 解密 JS压缩, CSS压缩, javascript compress, js在线压缩,javascript在线压缩,css在线压缩,YUI C ...

随机推荐

  1. 传输层——TCP报文头介绍

    16位源端口号 16位目的端口号 32位序列号 32位确认序列号 4位头部长度 保留6位 U R G A C K P S H R S T S Y N F I N 16位窗口大小 16位检验和 16位紧 ...

  2. C#中Graphics的画图代码【转】

    我要写多几个字上去 string str = "Baidu"; //写什么字? Font font = Font("宋体",30f); //字是什么样子的? B ...

  3. shiro中的授权

  4. vue router 跳转到新的窗口方法

    在CreateSendView2.vue 组件中的方法定义点击事件,vue router 跳转新的窗口通过采用如下的方法可以实现传递参数跳转相应的页面goEditor: function (index ...

  5. php导出excel不知道列数 php26进制函数

    function num2Letter($num) { $num = intval($num); if ($num <= 0) return false; $letterArr = array( ...

  6. 面向对象程序设计(Java)本学期课程改革说明

    1.教学方式采用反转课堂教学法,学生课前完成知识的学习,课堂是师生之间.学生之间互动的场所,包括答疑解惑.知识的运用技巧探讨等,教师的课堂责任是理解学生的问题和引导学生去运用知识. 2.为更好地执行反 ...

  7. react input的几个坑

    [react input的几个坑] 1.input标签中设置value后,input进入controlled模式,valuechange由自动变为手动,导致input无法编辑.如: <input ...

  8. propTypes

    [propTypes] React.PropTypes is deprecated as of React v15.5. Please use the prop-types library inste ...

  9. 第八篇:Jmeter的分布式测试

    一: 由于Jmeter本身的瓶颈,当模拟数以千计的用户并发的时候,使用单台机器会有些力不从心,甚至还会引起Java内存溢出的错误,要解决这个问题,就要使用分布式测试,运行多台机器,也就是所谓的Agen ...

  10. easymock单元测试跟踪工具

    EasyMock can save a lot of legwork and make unit tests a lot faster to write. builder.com Java E-New ...