网站优化经验(二) - YUI compressor傻瓜版一键压缩css/js

前言

本文接第一篇网站优化经验(一) - 在浏览器键入url按回车后发生了啥继续下面的优化方针,如果亲已经是GCC(Google Closure Compiler)、YUI CompressorUglifyJS用户,请无视本文。故此新手可以了解如何一键压缩自己的css/js文件。

备注

本文使用的是淘宝UED前端制作的YUI Compressor傻瓜版本(YUI Compressor2.4.2版),小熊这里更新为2.4.7版,2.4.7版对css的空选择器进行了优化,原2.4.2版文章见明河文章

压缩

关于压缩,网络上有很多支持压缩的网站,有些确实可用,但小熊坚持在本机环境也能够压缩(有时候苦逼着断开网络写代码的有木有?),正好本文前面提及了三个比较主流压缩方案,GCC是google推出的压缩器,相对于其他两款在压缩方便相对激进,在高级压缩上对编写代码的要求会有点限制(比如一个保存匿名fn的变量将会难以保留,这里不做演示,有兴趣可自行google),UglifyJS在代码缩短上也不错,例如在bool的优化上利用了js的隐形转换类型来替换true以及false(true => !0, false => !1),YUI Compressor是相对安全和平民化的压缩器,现在就YUI Compressor压缩为例,讲解使用方法(以下在win xp为例)。

  1. (已安装JDK请略过)由于YUI Compressor是基于JAVA平台工作,首先咱需要先下载JDK(请选择符合自己系统的版本安装)
  2. (已配置环境变量请略过)安装JDK完毕后;
    1. 右键 我的电脑(神马?小熊的?是亲的电脑) => 属性 => 高级选项卡 => 环境变量
    2. 在系统变量框内点击新建;
      变量名:JAVA_HOME
      变量值:G:\Program Files\Java\jdk1.6.0_20 (这里是我个人电脑安装JDK的目录,需要修改为你jdk的安装目录,请自行设置)
    3. 在系统变量内查找Path变量,没有请新建,找到则直接编辑追加内容,内容如下:
      变量名:Path
      变量值:%JAVA_HOME%\bin;
      我这里因为本身有Path系统变量,所以进行追加:
      %SystemRoot%\system32;%SystemRoot%;%SystemRoot%\system32\WBEM;C:\Program Files\Common Files\Thunder Network\KanKan\Codecs;%JAVA_HOME%\bin;
      追加时注意与前面的路径用一个分号隔开
    4. 唔,不会不耐烦了吧,没事,咱来最后一个变量设置,咱就搞定了,继续新建系统变量:
      变量名:CLASS_PATH
      变量值:.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar
  3. (已能运行JAVAC请略过)从系统进入命令行窗口(开始 => 运行),输入javac并按下回车,如果亲跟我一样看到一堆不知道神马的东东飞过,恭喜亲已成功配置环境
  4. 下载YUI Compressor傻瓜版(本地址YUIC核心为 Ver2.4.7版 115盘下载点)
  5. 下载后,解压文件,会看到安装.cmd,不解释,直接点击(如果亲发现XX卫士前来亮相请允许通过,它们是为了保护系统清静而阻挡了偶们压缩的去路~)
    安装成功后会出现一段提示安装成功的英文,并且你可以在解压包内的test.js上右键,看看菜单上是否多了一项YUI Compressor的压缩功能
    PS:如果系统给你猛然弹出个啥"rundll32 不是#¥%……%……",请回到前面的步骤检测是否配置好环境。
  6. 大功告成,你现在可以尝试对自己的css/js右键试试能否进行压缩,压缩界面挺友好,会告诉你节省了多少,压缩出来的文件会在你的名字后后缀前加上-min,如果你不喜欢可以用记事本编辑解压包内的compressor.cmd,搜索"-min",替换成你需要的字符即可,另外有一点需要注意,若你的css/js文件编码为UTF-8务必编辑compressor.cmd,搜索"GB18030"字段,替换为"UTF-8"。

该功能原版权归属淘宝UED前端小组,小熊代表童鞋们感谢他们推出这么便捷的功能,下篇文章,会讲如何合并你的css/js文件。各位good night~

  1. avatar
    路人甲#16693

    我们写过比你这个更简单的,配置个java_home就能使唤...实际上就是改写一个main文件,写个批处理.撸主,以后分享的时候,希望这块能深入一点,分析分析优化的原理.

    • avatar
      ibearB1

      长见识了,多谢建议

  2. avatar
    袁家小黑球#16692

    没有三了么,很期待呢,持续关注

  1. 目前还没有trackbacks.

  2. Trackbacks被禁用了

发表评论 进楼快捷键: ctrl+Enter取消回复

电子邮件地址不会被公开。

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>