最有效的压缩CSS样式表和js脚本

这两天小墨都在优化他的wordpress主题,其中他提到压缩Wordpress样式表和JS脚本 这种压缩CSS样式表和js脚本方法是利用gzip,而且是采用PHP压缩的gzip.但是这样gzip压缩会消耗服务器的CPU资源，(大部分服务器都限制CPU使用的)所以在CPU使用高的时期，gzip压缩模式下的网页访问速度可能比没有压缩的网页还要慢.

为了解决这个问题,WordPress 2.5 就取消了 gzip 选项，因为WordPress 2.5之前就是使用这个压缩.现在是否启用 gzip 压缩，直接服务器决定.如果服务器使用的是 Apache 2，服务器是采用 mod_deflate 模块来实现 gzip,经过测试，采用服务器压缩要比使用 PHP 压缩要更快，而且压缩之后更小.占用资源也少.所以你的服务器要是 Apache 2.0 并且要加载了 mod_deflate,不是所有主机都加载的,至少我现在用的hostmonster主机就没有.

那么是不是没有更好的压缩方法呢?不是.(小墨:丫的,还不入正题).这里最为有效的压缩方法还是才用PHP压缩的gzip,不过引入了静态化.通过压缩,大大的减少文件的大小,从而减小流量,减小加载时间.

首先在你的.htaccess里面加上RewriteRule (.*.css$|.*.js$) wp-gzip.php?$1 [L](什么你的服务器不支持.htaccess?那你不用看下去了)

这样就可以将css和js文件转到wp-gzip.php去了,由wp-gzip.php才处理,代码如下:

define(‘ABSPATH’, dirname(__FILE__).’/’);

$cache = true;
$cachedir = ‘wp-cache/’;

$gzip = strstr($_SERVER[‘HTTP_ACCEPT_ENCODING’], ‘gzip’);
$deflate = strstr($_SERVER[‘HTTP_ACCEPT_ENCODING’], ‘deflate’);
$encoding = $gzip ? ‘gzip’ : ($deflate ? ‘deflate’ : ‘none’);

if(!isset($_SERVER[‘QUERY_STRING’])) exit();

$key=array_shift(explode(‘?’, $_SERVER[‘QUERY_STRING’]));
$key=str_replace(‘../’,”,$key);

$filename=ABSPATH.$key;

$symbol=’^’;

$rel_path=str_replace(ABSPATH,”,dirname($filename));
$namespace=str_replace(‘/’,$symbol,$rel_path);

$cache_filename=ABSPATH.$cachedir.$namespace.$symbol.basename($filename).’.gz’;//生成gz文件路径

$type=”Content-type: text/html”;

$ext = array_pop(explode(‘.’, $filename));
switch ($ext){
case ‘css’:
$type=”Content-type: text/css”;
break;
case ‘js’:
$type=”Content-type: text/javascript”;
break;
default:
exit();
}

if($cache){
if(file_exists($cache_filename)){

$mtime = filemtime($cache_filename);
$gmt_mtime = gmdate(‘D, d M Y H:i:s’, $mtime) . ‘ GMT’;

if( (isset($_SERVER[‘HTTP_IF_MODIFIED_SINCE’]) &&
array_shift(explode(‘;’, $_SERVER[‘HTTP_IF_MODIFIED_SINCE’])) == $gmt_mtime)
){

header (“HTTP/1.1 304 Not Modified”);
header(“Expires: “);
header(“Cache-Control: “);
header(“Pragma: “);
header($type);
header(“Tips: Cache Not Modified (Gzip)”);
header (‘Content-Length: 0’);

}else{

$content = file_get_contents($cache_filename);
header(“Last-Modified:” . $gmt_mtime);
header(“Expires: “);
header(“Cache-Control: “);
header(“Pragma: “);
header($type);
header(“Tips: Normal Respond (Gzip)”);
header(“Content-Encoding: gzip”);
echo $content;
}

}else if(file_exists($filename)){

$mtime = mktime();
$gmt_mtime = gmdate(‘D, d M Y H:i:s’, $mtime) . ‘ GMT’;

$content = file_get_contents($filename);//读取文件
$content = gzencode($content, 9, $gzip ? FORCE_GZIP : FORCE_DEFLATE);//压缩文件内容

header(“Last-Modified:” . $gmt_mtime);
header(“Expires: “);
header(“Cache-Control: “);
header(“Pragma: “);
header($type);
header(“Tips: Build Gzip File (Gzip)”);
header (“Content-Encoding: ” . $encoding);
header (‘Content-Length: ‘ . strlen($content));
echo $content;

if ($fp = fopen($cache_filename, ‘w’)) {
fwrite($fp, $content);
fclose($fp);
}

}else{
header(“HTTP/1.0 404 Not Found”);
}
}else{
if(file_exists($filename)){
$mtime = filemtime($filename);
$gmt_mtime = gmdate(‘D, d M Y H:i:s’, $mtime) . ‘ GMT’;

if( (isset($_SERVER[‘HTTP_IF_MODIFIED_SINCE’]) &&
array_shift(explode(‘;’, $_SERVER[‘HTTP_IF_MODIFIED_SINCE’])) == $gmt_mtime)
){

header (“HTTP/1.1 304 Not Modified”);
header(“Expires: “);
header(“Cache-Control: “);
header(“Pragma: “);
header($type);
header(“Tips: Cache Not Modified”);
header (‘Content-Length: 0’);

}else{

header(“Last-Modified:” . $gmt_mtime);
header(“Expires: “);
header(“Cache-Control: “);
header(“Pragma: “);
header($type);
header(“Tips: Normal Respond”);
$content = readfile($filename);
echo $content;

}
}else{
header(“HTTP/1.0 404 Not Found”);
}
}

?>

最后在跟目录下建立一个wp-cache文件夹.访问你的网站,然后看看wp-cache文件夹里是不是生成了一些XXXjs.gz和XXcss.gz文件?