我发现处理缩小和压缩样式表的最佳方法是自己动手。看看这段代码:
<?php
header("Content-Type: text/css");
header("Last-Modified: ".gmdate('D, d M Y H:i:s', filemtime($_SERVER['DOCUMENT_ROOT'].$_SERVER['PHP_SELF']))." GMT");
header("Expires: ".gmdate('D, d M Y H:i:s', (filemtime($_SERVER['DOCUMENT_ROOT'].$_SERVER['PHP_SELF']) + 691200))." GMT");
//This GZIPs the CSS for transmission to the user
//making file size smaller and transfer rate quicker
ob_start("ob_gzhandler");
ob_start("compress");
//Function for compressing the CSS as tightly as possible
function compress($buffer) {
//Remove CSS comments
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
//Remove tabs, spaces, newlines, etc.
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer);
return $buffer;
}
//Main style
require_once($_SERVER['DOCUMENT_ROOT']."/templates/style/style.css");
//Other style
if($php_variable) {
require_once($_SERVER['DOCUMENT_ROOT']."/templates/style/other.css");
}
ob_end_flush();
ob_end_flush();
?>
这里发生了很多事情,所以让我解释一下。
标题
- 将文件类型设置为 CSS。
- 为缓存控制设置
Last-Modified 和Expires 标头(设置为一周多一点,您可以更改此设置)。
缩小和 GZIP
- 使用
ob_start,我们告诉它GZIP这个文件以及运行一个自定义函数compress。
-
compress 在发送到浏览器时删除所有 CSS cmets 和空白。这意味着您可以在源文件中以您喜欢的方式保留所有 cmets 和间距,以便于编辑,但只将最少的部分发送到浏览器。
风格
- 使用
require 导入样式表。对尽可能多的样式表执行此操作;它们都将通过一个 HTTP 请求传递给用户。
使用您的新文件
您将像调用普通 CSS 文件一样调用该文件。
<style type="text/css" src="/path/to/css-script.php"></style>
结论
使用这种方法,您正在做一些很棒的事情。
- 为缓存提供正确的标头,让您的网站快速回访。
- 缩小所有内容以不包含额外的空格或 cmets。
- 使用 GZIP 压缩文件以减小文件大小。
- 在一个 HTTP 请求中包含所有样式表,非常适合优化。
- 避免使用
@import 语句...这本身就很棒。
- 允许您保留多个样式表并使用 PHP 逻辑来包含或不包含它们。
- 让您可以根据需要保持源样式表的间距和注释,而不会对访问者造成任何影响。
您也可以对 JavaScript 使用相同的方法,尽管上面的 compress 函数严格用于 CSS,所以我会省略它。
将此技术与此缓存控制技术结合使用,您已经为自己构建了一个很棒的 CSS/JS 处理程序:How to force browser to reload cached CSS/JS files?