合并多个CSS文件

Question

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

问题在于浏览器不会缓存该文件。

是否有更好的方法来解决这个问题？

谢谢。

- christophmccann

---

你发送了哪些缓存头？浏览器是否设置为缓存文件？ - Douglas

您可以运行 PHP 脚本一次并将输出保存为服务器上的文件。 这样做的开销较小，缓存应该可以直接使用。 - cbednarski

Answer 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...

- Marc B

Answer 2

为什么不在全局CSS文件中使用@import并将其链接到HTML文件中呢？

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

- bimbom22

---

公平地说，在某些情况下创建单个文件确实可以找到性能提升，只要解决了缓存问题(也会发现性能损失，这是一种需要衡量的权衡之计)。 - Jon Hanna

Answer 3

我使用下面发布的代码。

它遵循谷歌页面速度建议。

请注意，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变量由您控制。它应该在整个站点的配置文件中设置。每次您将更新推送到线上，您只需更改一个地方的版本，所有看到新内容的人都会直接推送它，而不依赖缓存。

- Frankie

Answer 4

“级联样式表”在CSS文件之前被称为如此，因为CSS文件可以包含其他文件。您还可以在HTML文件中指定多个CSS文件（使用LINK），而不是将它们内嵌。

利用这些功能，让您的Web服务器负责发送适当的标头以进行客户端缓存和处理条件HTTP请求。

- Artefacto