(转自)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. 修改maven项目的编译版本

    在pom.xml中添加如下代码 <build> <!-- 配置了很多插件 --> <plugins> <plugin> <groupId>o ...

  2. centos 安装python3.6

    环境准备 yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqlite-devel 首先去官网下 ...

  3. tensorflow pip install 安装指定版本的包并指定安装源(速度会快很多)

    pip install tensorflow-gpu==1.3 pip install tensorflow-gpu==1.4 # pip install 命令行pip install -i http ...

  4. BeanFactory的实现原理

    先来看看Java代码获取Spring中Bean的代码(一共有五种方式,这里只展示其中一种方法): 有没有发现上面的代码与利用反射实现工厂模式的代码很相似.对,你没有看错,Spring中的BeanFac ...

  5. windows 允许空密码登陆

    HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Lsa  这个注册表键值下的limitblankpassworduse项 修改为0或者1

  6. 转换es6

    { "presets": [["env", { "modules": false }],"stage-3"," ...

  7. TensorFlow常用函数

    [1]卷积层(Convolutional Layer),构建一个2维卷积层,常用的参数有 conv = tf.layers.conv2d( inputs=pool, filters=64, kerne ...

  8. phacon只能访问index action

    location / { if (!-e $request_filename) { rewrite ^(.*)$ /index.php?_url=$1 last; break; } }

  9. style标签下的CSS代码的显示与实时编辑

    style标签也是标签 首先设置body style的样式 body style{ display:block; padding:0.6em 0.8em; border:1px dashed #ccc ...

  10. zabbix 3.2.6+centos 7 +nginx 1.12+ mysql 5.6+ Grafana +php 5.6

    先只记录关键点 1.nginx.MYSQL 用官方的YUM库安装 2.CENTOS升级到最新 3.ZABBIX 官方RPM安装,然后下载源码库,源码中的PHP复制至NGINX的配置目录 4.NGINX ...