zoukankan      html  css  js  c++  java
  • 使用YUI Compressor和DOS批处理脚本压缩JavaScript和CSS

    对于大量使用JavaScript和CSS的AJAX应用来说,如果JavaScript和CSS大小很大,则传输到客户端的时间会很久,网站性能不佳。而压缩JavaScript和CSS是自然的事情,本文使用YUI Compressor和DOS批处理脚本压缩JavaScript和CSS,加上IIS的GZIP,加起来能得到85%左右的压缩率。(其中YUI Compressor的压缩率大约为50%

    YUI Compressor - The Yahoo! JavaScript and CSS Compressor (Yahoo的JS和CSS压缩工具,具本人对比测试比较好用)
    Download 下载地址 : http://www.julienlecomte.net/yuicompressor/
    The YUI Compressor requires Java version >= 1.4. (机器需要Java 1.4以上的环境)

    常用示例(在cmd中执行)

     1: java -jar D:\yuicompressor-2.4.2\build\yuicompressor-2.4.2.jar --charset UTF-8 D:\my.js -o D:\my-min.js 
     2: java -jar D:\yuicompressor-2.4.2\build\yuicompressor-2.4.2.jar --charset UTF-8 D:\my.css -o D:\my-min.css 
     3:  

    如果没有给定charset参数,则字符集默认是系统的,此处指定了UTF-8,更加你的实际需要修改。具体语法和其他参数参考:http://www.julienlecomte.net/yuicompressor/

     

    使用DOS批处理脚本批量压缩JavaScript和CSS

    通常会把项目用到的js和css都按照模块放在专门的目录下:

    例如:

    所以需要建立一个DOS批处理脚本来自动处理目录和子目录下的所有js和css文件。

    新建一个批处理文件,例如myCompressor.bat,文件内容如下:

     1: @echo off
     2: ::设置YUI Compressor启动目录
     3: SET YUIFOLDER=D:\yuicompressor-2.4.2\build
     4: ::设置你的JS和CSS根目录,脚本会自动按树层次查找和压缩所有的JS和CSS
     5: SET JSFOLDER=D:\mySite\myJS
     6: echo 正在查找 JavaScript, CSS ...
     7: chdir /d %JSFOLDER%
     8: for /r . %%a in (*.js *.css) do (
     9: @echo 正在压缩 %%~a ...
     10: @java -jar %YUIFOLDER%\yuicompressor-2.4.2.jar --charset UTF-8 %%~fa -o %%~fa
     11: )
     12: echo 完成!
     13: pause & exit

    文件示例,压缩前后对比

    原文件:

     1: //this is desc
     2: function test(value)
     3: {
     4: //this is comment
     5: //this is comment
     6: //this is comment
     7: alert ( value ); 
     8: }
     9: function test2(value)
     10: {
     11: //this is comment
     12: //this is comment
     13: //this is comment
     14: alert ( value ); 
     15: //this is comment
     16: //this is comment
     17: //this is comment
     18: }
     19: 
     20: function test3(value)
     21: {
     22: alert ( value ); 
     23: }
     24: function test4(value)
     25: {
     26:  
     27: alert ( value ); 
     28: }
     29:  
     30: //this is comment
     31:  
     32: //this is comment
     33:  
     34: //this is comment
     35:  
     36: function test5(value)
     37: {
     38: 
     39: alert ( value ); 
     40: }
     41:  
     42: //this is comment
     43: //this is comment
     44: //this is comment
     45: function test6(value)
     46: {
     47:  
     48: 
     49: alert ( value ); 
     50: }
     51:  
     52: 
     53: function test7(value)
     54: {
     55:  
     56: 
     57:  
     58: alert ( value ); 
     59:  
     60: 
     61:  
     62: }
     63:  
     64: 
     65:  
     66: function test8(value)
     67:  
     68: {
     69:  
     70: 
     71:  
     72: alert ( value ); 
     73:  
     74: 
     75:  
     76: }
     77:  
     78: 
     79:  
     80: //this is comment
     81:  
     82: //this is comment
     83:  
     84: //this is comment
     85: function test9(value)
     86: {
     87: alert ( /*This is inline comment*/value ); 
     88:  
     89: var abc = function(v) {//this is a desc
     90: //this is another desc
     91: alert(v);
     92:  
     93: };
     94:  
     95: }
     96: function test10(value)
     97:  
     98: {
     99:  
     100: //this is comment
     101:  
     102: //this is comment
     103:  
     104: //this is comment
     105:  
     106: alert ( value ); 
     107:  
     108: }
     

    压缩后:

     1: function test(a){alert(a)}function test2(a){alert(a)}function test3(a){alert(a)}function test4(a){alert(a)}function test5(a){alert(a)}function test6(a){alert(a)}function test7(a){alert(a)}function test8(a){alert(a)}function test9(b){alert(b);var a=function(c){alert(c)}}function test10(a){alert(a)};

    使用YUI Compressor和DOS批处理脚本压缩JavaScript和CSS,加上IIS的GZIP,加起来能得到85%左右的压缩率。(其中YUI Compressor的压缩率大约为50%)也可以修改参数获得更多的压缩率。

  • 相关阅读:
    centos7系统初始化脚本
    git上传项目到github
    requests的使用
    zip函数
    mongodb基本操作
    mongodb的安装与配置启动(转)
    jupyter插件与主题
    map函数
    centos7 安装 ffmpeg
    centos7 下 yum 安装Nginx
  • 原文地址:https://www.cnblogs.com/Mainz/p/1432990.html
Copyright © 2011-2022 走看看