合并多个 CSS 文件答案

【问题标题】：Combining multiple CSS files合并多个 CSS 文件
【发布时间】：2010-08-12 23:06:39
【问题描述】：

现在我使用 PHP 脚本将多个 CSS 文件合并到一个脚本中，然后以 text/css 的内容类型输出它们。

他们的问题是浏览器不会缓存文件。

有更好的方法吗？

谢谢

【问题讨论】：

您要发送哪些缓存标头？浏览器是否设置为缓存文件？
您可以运行 PHP 脚本一次并将输出保存为服务器上的文件。这种方式的开销更少，而且缓存应该开箱即用。

标签： php css

【解决方案1】：

如果您必须通过 PHP 提供 CSS，您可以强制发出缓存标头，以便浏览器可以根据需要缓存输出：

<?php

    header('Cache-control: max-age=3600'); // cache for at least 1 hour
    header('Content-type: text/css');

    readfile('css1.css');
    readfile('css2.css');
    etc...

【讨论】：

【解决方案2】：

您为什么不在全局 css 文件中使用 @import 并将其链接到您的 html 文件中？

见：http://www.cssnewbie.com/css-import-rule/

【讨论】：

平心而论，在某些情况下，创建单个文件会获得性能提升，只要他解决了缓存问题（并且还会发现性能损失，这是一种交易- 应该测量的东西）。

【解决方案3】：

“级联样式表”在 CSS 文件可能include 其他人之前被称为。您还可以在 HTML 文件中指定多个 CSS 文件（使用 LINK），而不是内联。

使用这些工具，让您的 Web 服务器负责发送适当的标头，以便客户端缓存和处理条件 HTTP 请求。

【讨论】：

【解决方案4】：

我使用下面发布的代码。

它遵循 Google 的页面速度建议。

请注意readfile 比include 更快，因此应该使用。

<?php
#$off = 0; # Set to a reasonable value later, say 3600 (1h);
$off = 604800; # Set to 1 week cache as suggested by google

$last_modified_time = filemtime('csscompressor.php'); 
$etag = md5_file('csscompressor.php'); 

ob_start("ob_gzhandler");
ob_start("compress");
header('Content-type: text/css; charset="utf-8"', true);
header("Cache-Control: private, x-gzip-ok=''");
header("Last-Modified: ".gmdate("D, d M Y H:i:s", $last_modified_time)." GMT"); 
header("Etag: $etag"); 
header("Expires: " . gmdate("D, d M Y H:i:s", time() + $off) . " GMT");

// load css files
readfile("global.css");
readfile('jquery-theme.css');
// ...

?>

您还应该像这样提供所有 CSS 和 JAVASCRIPT 页面：

<script src="http://example.com/myjavascript.js?v=<?=$version=?>" ></script>

$version 变量由您控制。它应该在站点范围的配置文件中设置。每次您实时推送更新时，您都可以在一个地方更改版本，每个看到新内容的人都会推送它而不依赖缓存。

【讨论】：