php处理压缩js文件时积累的一点小经验

做web开发的，总是少不了和js打交道。js写的多了总是会出现影响页面加载速度的情况。特别是做富客服端时写了多个js文件，压缩合并文件就显得尤为重要了。

 

可能有不少的朋友会说在线的压缩工具也有很多啊。确实 ，但是如果能够在项目中直接合并压缩多个js，并且压缩完成后生成一个经过整合的新js文件是多么惬意的事情啊。今天因项目需要所以在php中尝试了一把。

 

 前提条件：

　　用下面方面压缩合并js文件的，原始的js文件需要安装以下规则进行编码（当然里面的引用路径根据个人情况决定）：

       

 　　

　　这样写的好处我想大家都知道，虽然不能解决减少http请求，但是可以简化前端页面js个数，在这里定义一个init()函数前端直接引用这个启动函数即可。另外下面php方法中的正则匹配也是根据这种结构去处理的。

　　

 

实现原理：

        即将js文件中的多余的注释、换行、回车、空格等无用字符删除即可。

 

代码示例：

 

//压缩JS文件并替换JS嵌套include文件
function zipJs($js){
    $h1 = 'http://';
    $s1 = '【:??】';    //标识“http://”,避免将其替换成空
    $h2 = 'https://';
    $s2 = '【s:??】';    //标识“https://”
    preg_match_all('#include\("([^"]*)"([^)]*)\);#isU',$js,$arr);    
    if(isset($arr[1])){
        foreach ($arr[1] as $k=>$inc){
            $path = "http://www.xxx.com/";          //这里是你自己的域名路径
            $temp = file_get_contents($path.$inc);            
            $js = str_replace($arr[0][$k],$temp,$js);            
        }    
    }

    $js = preg_replace('#function include([^}]*)}#isU','',$js);//include函数体
    $js = preg_replace('#\/\*.*\*\/#isU','',$js);//块注释
    $js = str_replace($h1,$s1,$js);
    $js = str_replace($h2,$s2,$js);
    $js = preg_replace('#\/\/[^\n]*#','',$js);//行注释
    $js = str_replace($s1,$h1,$js);
    $js = str_replace($s2,$h2,$js);
    $js = str_replace("\t","",$js);//tab
    $js = preg_replace('#\s?(=|>=|\?|:|==|\+|\|\||\+=|>|<|\/|\-|,|\()\s?#','$1',$js);//字符前后多余空格
    $js = str_replace("\t","",$js);//tab
    $js = str_replace("\r\n","",$js);//回车
    $js = str_replace("\r","",$js);//换行
    $js = str_replace("\n","",$js);//换行
    $js = trim($js," ");
    return $js;
}

 

 

将替换后的js生成一个新文件方法：

 

//写入文件，自动判断文件夹是否存在
function writeToFile($file,$s){
    $path = dirname($file);
    if(!is_dir($path)) mkdir($path,0777,true);
    file_put_contents($file,$s);
}

 

 

 测试示例：

$newjs = zipJs(file_get_contents("js/index.js"));

writeToFile("js/indexV2.0.js",$newjs);  

 

      做到这里就能正常的生成一个压缩合并过的js文件了，这个文件中包含所有你需要引用的js文件。经过本人测试在页面中用压缩合并过的js文件能正常处理相应业务逻辑，当然速度就比先前要快多了。