WEB前端优化必备压缩工具YUI-compressor详解
一、jquery.js与jquery.min.js
学习web前端开发的童鞋们都应该知道jquery是有两个版本的。
分别是开发版(例如:jquery-1.11.3.js)和压缩版(例如jquery-1.11.3.min.js)
那么这两个有什么区别??
楼主在这里简单的介绍一下,具体可以去查度娘
名称 大小 说明
jqeury.js(开发版) 约229KB完整无压缩版,主要用于测试,学习,和开发
jqeury.min.js(压缩版) 约31KB 经过压缩工具压缩,主要用于产品和项目使用
我们平时在学习的时候都是使用jquery.js文件,但是真正在企业中,为了压缩文件大小,提高运行效率,有必要使用jquery.min.js等类似的压缩文件来增强代码运行速度和减少内存的!!
想要更加了解为什么需要使用压缩版文件的请参考网址:http://blog.csdn.net/yangqicong/article/details/7057982
二、压缩工具YUI-compressor
压缩工具层次不穷,各有优点,选择适合的压缩工具为将来做项目开发使用是一件很重要的事情!!在这介绍YUI-compressor
英文官网:http://yui.github.io/yuicompressor/
GitHub-YUI:https://github.com/yui/yuicompressor
在线YUI:http://ganquan.info/yui/?hl=zh-CN
使用YUI压缩,首页需要准备YUI的jar包
下载地址:http://download.csdn.net/detail/baidu_25343343/9697139
下载好后,将jar包放在比较方便获取的位置,楼主放在了E盘的根目录下!!
下载好jar包文件后,还需要压缩的文件(通常是js文件),为了方便示范,楼主写了一个测试的html文件(yuitest.html)和js文件(yuitest.js)
好了,以上都是准备工作,那么如何使用YUI进行文件压缩??
1.方式一:
通过CMD命令行方式。
为了方便,我将刚才创建的yuitest.js文件复制一份也放到E盘根目录下面,方便进行压缩
打开cmd,输入java -jar 命令,先别点回车
然后,将刚才下载好的jar包导入,还是别点回车
然后,将需要压缩的js文件导入,并且用一个>符号输出压缩文件的名字和地址,这个时候点击回车!!!
如图,在E盘根目录下多了一个yuitest.min.js文件!!!这个就是yuitest.js经过压缩后的文件,让我们来看看两个文件的大小对比!
可以看到压缩文件yuitest.min.js文件比yuitest.js文件小了100Kb左右!!
2.方式二:
利用开发工具webstorm
没有这个工具的同学就自行下载哈!!!!
打开webstorm,将我们前面创建好的yuitest.html和yuitest.js导入,运行后结果如下:
然后,我们打开WS工具的设置界面
然后找到Tools -- > File Watchers,点击右边的+,选择最后一项"YUI compressor JS "
在弹出框中的Program项中点击后面的"..." 选择放在E盘下的jar包文件,然后点击OK即可
出现如下界面说明导入成功!!然后点击OK退出设置界面即可
我们以上做的这些操作的目的是为了在WS中设置一个监听器,我们对js文件进行的操作都会转变成min.js文件,无论是输入一个空格还是一个回车,都会启动jar包对js文件进行转换,例如我们在yuitest.js文件中输入一个回车或者空格后,在yuitest.js下面就多了一个yuitest.min.js文件
我们观察yuitest.min.js文件,神奇的发现,所有代码都变成了一行!!
var btn=document.getElementById("b1");btn.οnclick=function(){console.log(1);console.log(2);console.log(3);console.log(4);console.log(5);console.log(6);console.log(7);console.log(8);console.log(9);console.log(10);console.log(11);console.log(12);console.log(13);console.log(14);console.log(15);console.log(16);console.log(17)};
所有空格回车都被压缩了挤成一行,极大的缩减了内存!!
测试一下yuitest.min.js是否可用,在html文件引入yuitest.min.js
运行yuitest.html后,结果和压缩之前运行的结果一模一样,但是内存使用比原来的减小了!!
总结:
web前端优化是一个非常重要的任务,在开发中使用压缩工具也是必要途径之一!!
WEB前端优化必备压缩工具YUI-compressor详解相关推荐
- 《Web前端开发精品课——HTML5 Canvas开发详解》——第一部分第二章节
本节书摘来自异步社区<Web前端开发精品课--HTML5 Canvas开发详解>一书中的第1部分,第2章,作者:莫振杰 著,更多章节内容可以访问云栖社区"异步社区"公众 ...
- web前端vertical-align的作用及对象详解
很多程序员知道web前端技术里的vertical-align是什么意思,但是对于vertical-align到底以什么为对齐标准却一知半解,今天我们就来说说web前端vertical-align. 1 ...
- Web前端优化工具集锦
1. Google PageSpeed Google提供了 PageSpeed工具,这是一个浏览器插件,可以很好地应用上文中Google所提到的Web优化实践--帮助你轻松对网站的性能瓶颈进行分析, ...
- 关于大型网站技术演进的思考(二十)--网站静态化处理—web前端优化—中(12)...
Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳 ...
- WEB前端优化之内容篇
WEB前端优化之内容篇 Web前端优化过程中难免对相关的前台内容进行重新安排.其中主要的一些点如下: 1尽量减少 HTTP 请求 (Make Fewer HTTP Requests) 作为第一条,可能 ...
- web前端优化10点总结
web前端优化10点总结 tenfy 发表于2010年01月12日 11:41 阅读(5) 评论( 1) 分类: web前台开发 举报 实际上,我们通过前台web端的梳理和逻辑的优化(哪怕是一个 ...
- Web前端优化最佳实践
一.Web 前端优化最佳实践之内容篇 Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献.广为人知的优化规则也由 13 条到 14 条,再 ...
- 优秀web前端工程师必备_优秀的Web工程师的技能和素质
优秀web前端工程师必备 In this one-on-one episode of the Versioning Show, Tim and David talk about what makes ...
- Android性能优化之APK瘦身详解(瘦身73%)
image 公司项目在不断的改版迭代中,代码在不断的累加,终于apk包不负重负了,已经到了八十多M了.可能要换种方式表达,到目前为止没有正真的往外推过,一直在内部执行7天讨论需求,5天代码实现的阶段. ...
- 前端基础-HTML的的标签详解
阅读目录 一.head内常用标签 二. HTML语义化 三. 字符实体 四. h系列标签 五. p标签 六. img标签 七. a标签 八. 列表标签 九. table标签 十. form标签 一. ...
最新文章
- ITFriend站点内測公測感悟
- 陕西师范大学计算机专业录取,陕西师范大学计算机类专业2016年在山西理科高考录取最低分数线...
- ABAP 并发执行的威力
- 16、常用shell命令方法
- 风机桨叶故障诊断(六) 利用自编码器进行特征学习
- Factstone Benchmark
- 一题多解(八)—— 矩阵上三角(下三角)的访问
- python怎么画简单图-python中简单易学的绘图:用turtle画太极图
- 比Everything、listary、DocFetcher还好用的桌面文档搜索软件 - bbdoc
- 【3dmax千千问】初学3dmax插件神器第22课:3dmax效果图渲染进阶教程|VRAY相机为何要与VRAY灯光、VRAY材质、VRAY贴图等进行匹配呢?食住玩3dmax千千问教程
- 卡巴斯基7.0最新激活码
- 使用python将视频按照帧转为图片
- 8类网线利弊_八类网线你用过吗?与六类、七类等网线有啥区别?
- c语言的字符型都有什么作用是什么,字符型数据是什么意思怎么理解
- html的meta总结,html标签中meta属性使用介绍
- 项目管理之JIRA安装部署
- 全国计算机专业评估结果出炉;编程错误导致俄罗斯卫星发射失败
- 【Web开发】良心教程视频推荐
- 根据16进制输出所有汉字
- 21考研:一研为定,定为研一
热门文章
- C语言小案例_OA大典案例摘录【第1378篇】联想兄弟激光机卡纸 卡定影 有折叠 卡到出纸口不出来 合集...
- SAM2695 带效果器的低功耗单芯片合成器
- java在线编译功能
- java怎么编译_java怎么编译运行?java有哪些编译方法?
- 图像修复经典算法--Criminisi算法
- 农用地包括哪些地类_耕地包括哪些地类?怎么区分?都有什么用途?
- EPT DATA数据库能查到1998-2013年工业企业数据库
- 四叶草配置工具Clover Configurator for Mac
- 2022考研王道计算机408pdf(王道计算机组成原理+王道操作系统+王道计算机网络+王道数据结构)无水印
- 再谈内核模块加载(二)—模块加载流程(上)