(转)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 ...
随机推荐
- python基础学习Day14 内置函数 匿名函数
一.内置函数里几个高频重要函数 (1)min\max函数的用法 以min函数的为例: min:返回可迭代对象的最小值(可加key,key为函数名,通过函数的规则,返回最小值). l1 =[(,),(, ...
- java.lang.IllegalArgumentException: Missing either @POST URL or @Url parameter.
以前联调的接口,都是类似这样子的http://ip:8080/WLInterface/register 在baseUrl(http://ip:8080/WLInterface/register ) ...
- 1.3.2、CDH 搭建Hadoop在安装之前(端口---Cloudera Navigator加密使用的端口)
列出的所有端口都是TCP. 在下表中,每个端口的“ 访问要求”列通常是“内部”或“外部”.在此上下文中,“内部”表示端口仅用于组件之间的通信; “外部”表示该端口可用于内部或外部通信. 零件 服务 港 ...
- tomcat中的类加载机制
Tomcat中的类加载机制符合JVM推荐的双亲委派模型,关于JVM的类加载机制不多说,网上很多资料. 1. Tomcat类加载器过程. tomcat启动初始化阶段创建几个类加载器: private v ...
- 解题7(FindFirstOnlyOne)
题目描述 找出字符串中第一个只出现一次的字符 输入描述: 输入一个非空字符串 输出描述: 输出第一个只出现一次的字符,如果不存在输出-1 示例1 输入 asdfasdfo 输出 o 代码如下: pac ...
- Jenkins 传递自定义的参数
1.同一个job之间,不同的shell之间传递参数 注意:如果是job参数化构建自定义的参数,可以在job的不同shellj间引用,但是不能改变他的值供后面的shell使用 job在执行时会针对所 ...
- 使用Fiddler查看APP的请求接口、接口参数和返回值的方法
1.下载Fiddler,然后安装成功后. 2.开启代理的设置 3.查看电脑的ip, 4.建立一个wifi局域网,什么360wifi,猎豹wifi,腾讯wifi都可以,用安装手机接入到这个局域网的wif ...
- JAVA高精度模板
刚开始还坚持用C++写高精来着,后来发现JAVA写高精方便太多了,所以也来学习一下JAVA高精度的模板. 参考:https://www.cnblogs.com/imzscilovecode/p/883 ...
- Codeforces Beta Round #42 (Div. 2)
Codeforces Beta Round #42 (Div. 2) http://codeforces.com/contest/43 A #include<bits/stdc++.h> ...
- JavaScript各种继承方式(三):组合继承(combination inheritance)
一 原理 组合继承仅仅是同时使用了原型链继承和构造函数继承. 具体做法是,将父类的实例作为子类的构造函数的原型对象,并在子类的构造函数中调用父类的构造函数. function Fruit(name){ ...