(转自)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. 第三条博客 你好 Java web!

    今天周五了,明天就是周末!第一个周末就这样结束了 今天我学习了MyEclipse开发 Javaweb 程序,学的是最基础的那一部分 首先先创建了自己的项目,展开项目标签,编辑index.jsp. 我还 ...

  2. WilliamChart各种图表效果实现大全《IT蓝豹》

    WilliamChart各种图表效果实现大全,有水平线条表格,有柱状表格等.由LineFragment,BarFragment,StackedFragment,SandboxFragment几个fra ...

  3. EF 控制code-first生成的数据库表名的单复数

    原地址:https://blog.csdn.net/winnyrain/article/details/51248410 在Code-First中,默认生成的数据库表的名称为类型的复数形式,如Mode ...

  4. Redis Cluster在线迁移

    由于之前的redis cluster物理硬件性能不足.决定升级到更好的服务器上.考虑到redis是核心生产数据库,决定在线迁移,迁移过程,不中断服务. 下面是测试环境的完成迁移步骤:1. 原环境(测试 ...

  5. vue.js入门操作

    1.vue框架是经典的MVVM模式, .vue文件是模板文件模板文件又分为3个部分一 <template></template>(html部分)二 <script> ...

  6. php yii 命令

    php yii 敲回车 This is Yii version 2.0.11. The following commands are available: - asset Allows you to ...

  7. pyhton笔记(一):字符编码、变量

    一.什么是python? python是一种面向对象.解释型的计算机语言,它的特点是语法简洁.优雅.简单易学. 编译型语言: 写好代码之后把代码编译成二进制文件,运行时运行编译好的二进制文件.比如C. ...

  8. mysql数据库备份shell

    sip=xxx.xxx.xxx.xxx user=user passwd=passwd back_path=/home/xxxxx/mysqlbak data_name=data_name date= ...

  9. Python图片识别找坐标(appium通过识别图片点击坐标)

    ***如果只想了解图片相似度识别,直接看第一步即可 ***如果想了解appium根据图片识别点击坐标,需要看第一.二.三步   背景|在做UI测试时,发现iOS自定义的UI控件,appium识别不到. ...

  10. I/O复用之epoll

    epoll 简介 epoll是为处理大批量句柄而作了改进的poll,它是在2.5.44内核中被引进的. 相关函数调用 int epoll_create(int size); 创建一个epoll的句柄. ...