让JS和CSS也支持Gzip压缩

阳光曾经写在以前的文章中写过“开启GZIP压缩功能为wordpress提速”来加速网页的显示速度不过对于CSS和JS，默认是不进行压缩的，之后阳光为了让它也对JS和CSS进行压缩从网上找了很多资料，终于有一个是能用的的现在分享给大家。

让JS和CSS支持Gzip压缩

搜索了一下，有很多方法可以实现，但都有一个严重的BUG，该死的IE６对Gzip的支持不是很好，如果对CSS、JS进行Gzip压缩，会使部分 JS失效或者CSS无法加载，Dream试了下，只要一启用Gzip，Wordpress就处于裸奔状态，CSS完全失效，而且还一大堆JS错误。既然 IE６不支持，那我们就绕过它（惹不起我还躲不起吗？）经过一下午的折腾，终于搞定了这问题。

首先新建GZIP.PHP的文件

在你网站的根目录下新建一名字为gzip.php的文件，代码如下。代码有点长要拷贝完整才行的。

?php
define(‘ABSPATH’, dirname(__FILE__).’/');
$cache = true;//Gzip压缩开关
$cachedir = ‘wp-cache/’;//存放gz文件的目录，确保可写

$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)){//假如存在gz文件

$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))
{

// 浏览器cache中的文件修改日期是否一致，将返回304
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
{

//读取gz文件输出
$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))
{ //没有对应的gz文件

$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’))
{//写入gz文件，供下次使用
fwrite($fp, $content);
fclose($fp);
}

}
else
{
header(“HTTP/1.0 404 Not Found”);
}
}
else
{ //处理不使用Gzip模式下的输出。原理基本同上
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”);
}
}

然后我们修改.htaccess

在你网站的根目录下的.htaccess中添加以下代码，如果.htaccess不存在则新建一个

RewriteCond %{HTTP:User-Agent} !MSIE [5-6]
RewriteRule (.*.css$|.*.js$) gzip.php?$1 [L]

这段代码的意思是判断当前浏览器是否为IE５－６（虽然现在很少人用IE５，不过为保险起见还是加上吧），如果不是则对CSS/JS启用Gzip压缩。
最后我们通过Firefox插件YSlow插件来检测下启用GZIP前后的访问速度。YSlow的使用方式和下载地址在阳光以前的文章中有介绍过的：

YSlow的使用方式请点击这里：用YSlow对网站体检—附中文版下载

你可能也会喜欢这些文字