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目录约束未实现自动处理
下载
- 文档下载地址
更多推荐
已为社区贡献2条内容
所有评论(0)