zoukankan      html  css  js  c++  java
  • webstrom内置压缩工具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文件,神奇的发现,所有代码都变成了一行!!

    [html] view plain copy
     
    1. var btn=document.getElementById("b1");btn.onclick=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后,结果和压缩之前运行的结果一模一样,但是内存使用比原来的减小了!!

  • 相关阅读:
    Linux -- 如何减少IO过程中的CPU copy
    Linux -- 在多线程程序中避免False Sharing
    智能文件选择列表—— bat 批处理
    Windows NTFS 符号链接 与 Linux 软连接
    【2017.12.12】deepin安装U盘制作,支持 BIOS+UEFI,deepin_Recovery+Win PE
    Qt creator中文输入—fctix-qt5 源码编译 libfcitxplatforminputcontextplugin.so
    安装 Qt 及所需 gcc 等
    虚拟机安装 deepin Linux 注意事项
    deepin 常用设置
    VIM常用快捷键
  • 原文地址:https://www.cnblogs.com/zhangruiqi/p/7657362.html
Copyright © 2011-2022 走看看