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的压缩相关推荐
- javascript编译压缩
javascript编译 js是JavaScript 源码文件, .min.js是压缩版的js文件. .min.js文件经过压缩,相对编译前的js文件体积较小,传输效率快.经过编码将变量和函数原命名改 ...
- (原创)一个JavaScript Function Outliner插件 第四版本 支持内嵌javascript,且可以对javascript进行压缩
这个版本离上个版本有些时日了,最近事情太多,这两天刚空闲下来就赶紧弄了下 要查看上个版本请点击这里 在今天发布的版本里对aspx/html页面嵌入的javascript也支持了,你可以折叠内嵌的jav ...
- javaScript 字符串压缩
字符串压缩.利用字符重复出现的次数,编写一种方法,实现基本的字符串压缩功能.比如,字符串aabcccccaaa会变为a2b1c5a3.若"压缩"后的字符串没有变短,则返回原先的字符 ...
- 在线压缩html,JS代码压缩 - javascript代码压缩 - jsmin在线js压缩工具
输入代码: // is.js // (c) 2001 Douglas Crockford // 2001 June 3 // The -is- object is used to identify t ...
- 一个很好用的JavaScript在线压缩解压工具
https://tool.lu/js/ 转载于:https://www.cnblogs.com/redfull/p/9875153.html
- 打开html文件图片为什么没有_提高网站打开速度秘诀:压缩html,Javascript和CSS文件...
微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号 ...
- html的压缩原理,javascript压缩的原理及工具
要想文件更快地下载完成,最直接的办法就是减小文件的体积,也就是把体积"压缩"了,对于javascript文件同样如此. javascript文件与CSS文件类似,但他们在缩减体积方 ...
- 《JavaScript 每周导读》【第一期】
<JavaScript 每周导读>旨在分享最新的 JavaScript 重点资讯.技术文章.开发工具资源以及新出炉的各种开发框架,让 JavaScript 开发人员能够了解领域内的技术发展 ...
- 良好的JavaScript编码风格(语法规则)
编码风格 1.概述 "编程风格"(programming style)指的是编写代码的样式规则.不同的程序员,往往有不同的编程风格. 有人说,编译器的规范叫做"语法规则& ...
最新文章
- spring整合springmvc和mybatis
- Mozilla计划向Firefox浏览器中添加违规警告
- javascript闭包,你大爷永远是你大爷
- python 面向对象(进阶篇)
- POJ2018-Best Cow Fences【实数二分答案】
- a5d2 mac 驱动分析
- Hadoop、spark、Flink、Blink、storm介绍
- lamp+laravel
- 【软件使用技巧】二(Word文档损坏)
- oracle 11g rac进程起停
- python如何操作oracle数据库_Python连接oracle数据库的基本操作
- 埃氏筛_四种形式 ( pass even , bool , char , differently judge )
- Android数据编码之Base64
- RobotStudio安装教程
- 学习逆向某风控id分析
- 协议、接口、服务的联系
- 如何查看Dell笔记本型号?
- Linux——SAMBA文件共享
- 云计算基础课堂001 Linux系统与CentOS7的安装部署(小白向—怎么在VMware虚拟机安装基于Linux操作系统的CentOS7)
- 使用three.js加载3dmax资源,以及实现场景中的阴影效果