简述对WP博客样式表和JS脚本的压缩

发表于 分类于 阅读次数： 本文字数： 1.3k 阅读时长 ≈ 5 分钟

应朋友的要求，才决定要写这个文章，我想，我对这个问题的理解是比较肤浅的，恐怕也讲不清楚，所以，我只简述一下步骤，高手就直接跳过吧。

先从文件在网络上传输说起，浏览一个网页，一般就是浏览器从服务器上下载文件的一个过程。举个例子，如果浏览我的网页，你要下载这么几个文件：

  • 由index.php输出的一个HTML文件，也就是主页上的文字、链接还有他们的逻辑结构
  • style.css样式表文件，决定了页面的外观
  • jquery.js和vg.js脚本文件，决定了主页上的一些小功能，表单验证啦，ajax之类的
  • 其他若干文件如logo.png，日志中引用的图片，或者留言中的头像，等等

浏览一个网页要下载这许多文件，如果每个文件又都很大的话，得到的结果只有一个，就是网页展现时间相对来说要长。如果能对传输的文件进行压缩，就能缩小文件的体积，加快浏览器的下载速度，减少服务器的流量。

还好，浏览器本身就是支持压缩格式的，比如gzip，现在问题的关键就是怎么让服务器把输出的文件压缩。我在网上搜了一下，一般最好的做法是使用服务器来压缩，Apache带有一个模块，叫做deflate，就专门干这个，如果你的服务器支持这个功能，那么你就很幸运，直接开启这个，然后配置一下就可以了。当然，我没有，所以，我也搞不清楚怎么配置啦。

服务器本身不支持，我们还有别的办法，那就是使用PHP来压缩了，PHP是支持gzip的。当然，又是一样，我讲不清楚怎么写那些代码，也搞不懂，但是这不代表我就不能用。

一个个说，压缩HTML文件，我用的是一个插件，就是WP Super Cache，这个插件自己就可以对Cache下来的文件进行压缩，只要在控制面板里面打个钩就行了。（WP 2.3 以前的，WP本身就有压缩功能）

刚才只说了压缩HTML，剩下的东西怎么办呢？本来我也是没有办法的，是看到了伟大的K2的代码，才知道，原来还可以这样。起作用的是这么段代码，这段代码在js文件夹的gzip-header-js.php和css文件夹的gzip-header-css.php中都有，内容几乎是一样的，其作用就是对这个文件进行压缩，并且要求浏览器缓存这个文件，缓存时间是两个月。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

=') and ob_get_length() == false) or ob_get_length() === false) ) {
ob_start('ob_gzhandler');
}

// The headers below tell the browser to cache the file and also tell the browser it is JavaScript.
header("Cache-Control: public");
header("Pragma: cache");

$offset = 5184000; // 60 * 60 * 24 * 60
$ExpStr = "Expires: ".gmdate("D, d M Y H:i:s", time() + $offset)." GMT";
$LmStr = "Last-Modified: ".gmdate("D, d M Y H:i:s", filemtime($_SERVER['SCRIPT_FILENAME']))." GMT";

header($ExpStr);
header($LmStr);
//注意！！！！！：以下两个header是二选一的，千万不能全放上去啊！！！！！
//此段代码专用于js代码的压缩，看下面这句Content-Type就知道了。
header('Content-Type: text/javascript; charset: UTF-8');
//如果是CSS文件，替换成下面这句
header('Content-Type: text/css; charset: UTF-8');
?>

大家要做的也是很简单的，把上面这段代码，插入到你的js文件，或者CSS文件中，然后将他们的扩展名加一个.php就可以了。注意看我写的注释啊，不看清楚就照抄，你肯定搞不定。

现在来举个例子，比如我的页面使用了jQuery类库，那么我原本要这样写：

1
2
3



然后，我把上面的代码拷贝到jquery.js文件的最前面，然后重命名成jquery.js.php，引用时候写法也变成下面的样子了：

1
2
3



jQuery的那个文件原来的尺寸为55KB，经过这样的处理，浏览器实际下载量是17KB，只有原来的三分之一。

但是对样式表的压缩，并非那么一帆风顺，因为主样式表文件是不能重命名的，必须叫style.css，这是WP机制决定的的，如果你换了名字，模板根本不会出现在模板列表里面。

处理这个问题的方法我知道两个：

1，把style.css里面的内容，拷贝到另一个css中，比如，myzipstyle.css中，然后使用上面我说的方法，最后在header.php中加上对myzipstyle.css.php的引用，就可以了。而style.css里面就只有7行注释，你可以把对它的引用从header.php中去掉。但是这个style.css，及其文件内前面那些注释，都是必须的，不能删掉（虽然你可以不用）。

2，像伟大的K2那样，在style.css里面引用另一个css文件，写法如下：

1
2
3
4

//K2的style.css，除了注释，就只有下面一行。相信聪明的你已经看懂了，我就不再费唇舌了。
@import url('css/core.css.php');

乱七八糟，洋洋洒洒一大堆，希望能对你有所帮助吧~~

当然，还有更高级的方法，也更厉害，但是我是没有搞清楚的，我提提名字，如果你有志于再深入一步的话，可以有个出发点。再后面的方法就是，自己编译一个专门用于压缩的CGI程序（也可以用别人编译好的），然后放到服务器的cgi-bin文件夹里面，然后，手动修改.htaccess，让浏览器访问的每个文件，都从“压缩机”里面过一遍。你可以去：阅微堂（http://zhiqiang.org/blog/posts/speedup-your-blog.html），主人对博客优化有着深入而系统的研究。