(转)JavaScript的压缩
简述
如果非常着急,这块可以跳过直接从约束条件开始也行。
JavaScript压缩这块需要权衡一下,压缩的成本会影响咱们自己的调试进度增加了编码、测试的负担,而的确给产品或用户带来了多一些的安全、性能上的提升。
参考ext、jquery等开源Java Script框架的风格,需要有两种JavaScript版本:
- 有一版是我们开发人员自己调试、开发用的
- 另一版则是被产品用的,这种方式下相应会增加我们测试的工作量
这种方式下如果现场出现问题我们解决的办法就是定位是哪个js文件,然后我们用开发版替换到压缩版,问题解决完毕后再把相应的开发版压缩成产品版。
具体实施
- 当JavaScript文件未使用OOP策略编写那么只需要针对这些JavaScript文件进行压缩就可以了。
- 如果JavaScript采用完成OOP策略编写的并且具有模块划分、继承层次结构其实就类似JavaScript开源项目,那么我们除了需要压缩JavaScript还需要把原始JavaScript依赖关系给提取出来。当客户端发起加载指定模块请求那么相应服务器就把与此模块相关的所有JavaScript全部合并起来并推送。
相关工具
- YUI Compressor
- Ant,利用Ant脚本对指定目录中的js压缩非常方便
约束条件
- 要求我们所有JavaScript文件编码方式为UTF-8,如果为其它编码方式将会出现无法预料的异常信息。
- 要求我们JavaScript存放目录的路径必须不含中文字符
- 要求机器上必须有Ant环境。
使用手册
请注意,原则上请不要修改build.xml文件,因为对build.xml中的配置项的修改会影响到我们整个JavaScript文件压缩管理逻辑。
- 首先修改build.properties文件中的内容
- compress.destdir,指定原始JavaScript目录路径
- compress.srcdir,指定压缩完成后的JavaScript文件存放路径,目录名必须是compjs且与compress.destdir指定的路径平级,见截图:
|
|
|
|
这里表示将项目相关的JavaScript文件压缩并转储到compjs目录下。
- 确认依赖的两个jar包和一个环境
- 一个环境,指的就是Ant环境,要确保ant环境是正常的版本在1.6.0以上就可以了
- 两个jar包,这两个jar包必须放在lib目录下(见下面的目录结构截图)
ant-contrib-1.0b3.jar,主要是Ant任务标签功能性增强。
yuicompressor-2.4.2.jar,是一个开源项目的结晶,我们使用它来完成JavaScript文件的压缩
- 目录结构截图
|
lib目录下存放有两个依赖的jar文件 |
- 请再次检查,我们程序目前不能支持文件路径为中文的情况,在内部变量正则匹配转换时会出现乱码现象
- 执行,这块就直接在CMD下敲ant -f build.xml就可以了,见截图:
|
这里还提示foreach标记过时的情况,有兴趣可以改一下 |
- 执行完成,执行完成后我们会在指定的输出目录中看到一堆层次分明与原始文件一一对应的JavaScript文件,见截图:
|
压缩前 |
压缩后 |
|
|
|
相信您一定可以从上图中发现不同之处。。。
其它
目前我们的这个工具也可以支持对HTML、CSS等类型文件的压缩,但此版本仅面向JavaScript,其实主要是依靠开源软件来完成的,我们只是做了一层简单的约束处理、批量化封装以让其更加适合我们。
目前不支持(缺陷)
- 压缩完成后我们还必须要求原始JavaScript文件必须保留
- 对目录中文路径问题存在bug,请不要使用中文路径
- 对compjs目录约束未实现自动处理
下载
- 文档下载地址
(转)JavaScript的压缩的更多相关文章
- 利用YaHoo YUI实现Javascript CSS 压缩 分类: C# 2014-07-13 19:07 371人阅读 评论(0) 收藏
网站优化时,往往需要对js文件,css文件进行压缩,以达到减少网络传输数据,减少网页加载时间:利用YaHoo的YUI可以实现Javascript,CSS,压缩,包括在线的js压缩和程序压缩,发现C#也 ...
- [H5-Compress-Image]利用canvas实现 javascript 图片压缩处理_基于requirejs模块化的代码实现
// 还存在有问题的代码,问题在于processFile()中// 问题:在ipone 5c 下,某些图片压缩处理后,上传到服务器生成的文件size为0,即是空白 ;define(['mod/tool ...
- 你想不到的压缩方法:将javascript文件压缩成PNG图像存储
这样可以做到很高的压缩比,到底有多高,下面会提到.这种方法用到了 canvas 控件,这也意味着只有支持 canvas 控件的浏览器下才有效. 现在你可以看到,上面的图像类似一个噪声图像,但它实际上是 ...
- css javascript 自动化压缩(保存后即自动生成压缩文件)
先上图:
- JavaScript混淆压缩
比较好用的压缩软件,支持合并 JsCompressor-v3.0 比较好用的混淆站点:http://dean.edwards.name/packer/
- gzip压缩JavaScript
为了提高客户端的体验效果,RIA开发逐渐兴起.这样会项目中会充斥的大量的JavaScript代码,与此同时会消耗客户端浏览器性能.对于 Ext 实现的 one page one application ...
- 使用GruntJS链接与压缩多个JavaScript文件
使用GruntJS链接与压缩多个JavaScript文件 自己写了个简单的HTML5 Canvas的图表库,可以支持饼图,折线图,散点图,盒子图 柱状图,同时支持鼠标提示,绘制过程动画效果等.最终我想 ...
- Google Closure Compiler高级压缩混淆Javascript代码
一.背景 前端开发中,特别是移动端,Javascript代码压缩已经成为上线必备条件. 如今主流的Js代码压缩工具主要有: 1)Uglify http://lisperator.net/uglifyj ...
- CSS, JavaScript 压缩, 美化, 加密, 解密
CSS, JavaScript 压缩, 美化, 加密, 解密 JS压缩, CSS压缩, javascript compress, js在线压缩,javascript在线压缩,css在线压缩,YUI C ...
随机推荐
- Hibernate 再接触 Hello world 模拟Hibernate
没有Hibernate以前 Cilent 客户端 new出一个对象 然后执行JDBC 然后这样的访问数据库并不是面向对象语言 使用Hibernate以后 Cilent new 出一个对象后 访问配置文 ...
- MongoDB模糊查询,以及MongoDB模糊查询时带有括号的情况
模糊查询 记录如下: { "_id" : ObjectId("5c3d486d24aa9a000526367b"), "name" : &q ...
- rectangle,boundingRect和Rect
rectangle( rook_image, Point( , *w/8.0 ), Point( w, w), Scalar( , , ), , ); 矩形将被画到图像 rook_image 上 矩形 ...
- C++访问二维数组元素
if(*image_in+j*+xsize+i)>=thresh)//xsize图像宽度 image_out是首地址,加上j*行宽就是目标行的首地址,再加上i,就是在此行中的第i个像素,所以整个 ...
- vl_sift函数用法
I = vl_impattern('roofs1') ; image(I) ; %vl_sift函数的输入是一个单精度的灰度图像,灰度值区间归一化到[, ]. %因此图像 I 需要通过下面的函数转成相 ...
- 用Navicat for MySQL 连接 CentOS 6.5
navicat for mysql windows 端 连接mysql服务器 用SSH通道访问 , 新建连接时配置如下 (两张图解释) 1.配置SSH . 配置常规
- Tween animation
[Tween animation] An animation defined in XML that performs transitions such as rotating, fading, mo ...
- Pushlet实现后台信息推送(二)
上一篇日志利用推送源周期性地向订阅了某一事件的所有网页端推送信息,但怎么实现向特定的某一个用户推送信息呢,想象一个网络聊天室,怎么向单独的一个好友私聊呢.问题的关键就是那个SessionID,Push ...
- Shader基础(渲染管线)
Shader原理部分 渲染绘图管线流程: 1.顶点处理(坐标系的转换) 一个模型有自身的方向(前方,上方,右方等)和中心点,既本地坐标系: 将这个模型放到场景当中,通过场景中的世界坐标原点和世 ...
- mysql里max_allowed_packet的作用
MySQL根据配置文件会限制Server接受的数据包大小.有时候大的插入和更新会受 max_allowed_packet 参数限制,导致写入或者更新失败. 查看目前配置: 代码如下: show VAR ...





