压缩 HTML、CSS 和 HTML 的最佳方法 禁用 mod_deflate 和 mod_gzip 的 JS

Question

我在运行 Apache 2 的共享主机上有几个站点。我想压缩传送到浏览器的 HTML、CSS 和 Javascript。 主机已禁用 mod_deflate 和 mod_gzip，因此这些选项无效。 不过，我确实有 PHP 5，所以我可以使用它的 gzip 组件。

我目前将以下内容放入我的 .htaccess 文件中：

php_value 输出处理程序 ob_gzhandler

但是，这仅压缩 HTML，而忽略 CSS 和 JS。

有没有一种可靠的方法可以透明地压缩 CSS 和 JS 的输出，而不必更改每个页面？ 我在谷歌上搜索过，并提出了许多解决方案，但我还没有找到一个可以工作的解决方案。 如果有人能提出一个他们知道可行的解决方案，我们将非常感激。

请注意，方法 2 "noreferrer">关于压缩 CSS 的权威文章 看起来是一个很好的解决方案，但我无法让它发挥作用。 有其他人使用此方法成功吗？

Answer 1

我所做的：

• 我分别将脚本放置在 js 目录中，将样式表放置在 css 目录中。

• 在 Apache 配置中，我添加如下指令：

  <目录/data/www/path/to/some/site/js/>> 
        AddHandler 应用程序/x-httpd-php .js 
        php_value auto_prepend_file gzip-js.php 
        php_flag zlib.output_compression 打开 
     
    <目录/data/www/path/to/some/site/css/>> 
        AddHandler 应用程序/x-httpd-php .css 
        php_value auto_prepend_file gzip-css.php 
        php_flag zlib.output_compression 打开 
     
    

• js 目录中的

  gzip-js.php 如下所示：

  <前><代码>

• ...而 css 目录中的 gzip-cs.php 如下所示像这样：

  <前><代码>

这可能不是最优雅的解决方案，但它肯定是一个简单的解决方案，需要很少的变化并且运作良好。

Answer 2

抱歉耽搁了——这对我来说是忙碌的一周。

假设：

• .htaccess 与 compress.php 位于同一个文件中
• 要压缩的静态文件位于 static 子目录中

我从设置.htaccess 中的以下指令：

RewriteEngine on
RewriteRule ^static/.+\.(js|ico|gif|jpg|jpeg|png|css|swf)$ compress.php [NC]

您的提供商需要允许您覆盖 .htaccess 文件中的 mod_rewrite 选项。
那么 compress.php 文件本身可以如下所示：

<?php

$basedir = realpath( dirname($_SERVER['SCRIPT_FILENAME']) );
$file = realpath( $basedir . $_SERVER["REQUEST_URI"] );

if( !file_exists($file) && strpos($file, $basedir) === 0 ) {
    header("HTTP/1.0 404 Not Found");
    print "File does not exist.";
    exit();
}

$components = split('\.', basename($file));
$extension = strtolower( array_pop($components) );

switch($extension)
{
    case 'css':
        $mime = "text/css";
        break;
    default:
        $mime = "text/plain";
}

header( "Content-Type: " . $mime );
readfile($file);

您当然应该向 switch 语句添加更多 mime 类型。 我不想让解决方案依赖于 pecl fileinfo 扩展或任何其他神奇的 mime 类型检测库 - 这是最简单的方法。

至于保护脚本 - 我将其转换为文件系统中的真实路径，因此不会出现被黑的“../../../etc/passwd”或其他 shellscript 文件路径。

这就是

$basedir = realpath( dirname($_SERVER['SCRIPT_FILENAME']) );
$file = realpath( $basedir . $_SERVER["REQUEST_URI"] );

片段。 尽管我非常确定除 $basedir 以外的其他层次结构中的大多数路径在到达脚本之前都会由 Apache 处理。

我还检查生成的路径是否位于脚本的目录树内。
按照 pilif 的建议添加缓存控制的标头，您应该可以找到解决问题的方法。

Answer 3

无论你做什么，都要小心客户端的缓存：

浏览器​​会采取各种技巧来尝试最小化带宽，HTTP 协议中有很多方法可以做到这一点，所有这些都由 apache 处理 - 如果你只是提供本地文件。

如果您不这样做，那么这是您的责任。

至少看一下当前所有浏览器都支持的 ETag 和 If-Modified-Since 机制，它们似乎是查询服务器更新内容的最可靠的方法。

使用 If-Modified-Since-Header 向浏览器提供 CSS 文件的可能方法如下（空标头用于关闭 PHP 默认发送的任何非缓存标头）：

$p = 'path/to/css/file'
$i = stat($p);
if ($_SERVER['HTTP_IF_MODIFIED_SINCE']){
    $imd = strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']);
    if ( ($imd > 0) && ($imd >= $i['mtime'])){
        header('HTTP/1.0 304 Not Modified');
        header('Expires:');
        header('Cache-Control:');
        header('Last-Modified: '.date('r', $i['mtime']));
        exit;
    }
}
header('Last-Modified: '.date('r', $i['mtime']));
header('Content-Type: text/css');
header('Content-Length: '.filesize($p));
header('Cache-Control:');
header('Pragma:');
header('Expires:');
readfile($p);

代码将使用 if-modified-浏览器发送的since-header来检查服务器上的实际文件自浏览器给出的日期以来是否已更改。 如果是，则发送该文件，否则，将返回 304 Not Modified，并且浏览器不必重新下载整个内容（如果它足够智能，它也会将解析后的 CSS 保留在内存中）。

还有另一种机制涉及服务器为每段内容发送唯一的 ETag-Header。 客户端将使用 If-None-Match 标头将其发回，从而使服务器不仅可以决定上次修改的日期，还可以决定内容本身。

但这只会使代码变得更加复杂，所以我将其省略了。 FF、IE 和 Opera（可能还有 Safari）在收到附加了 Last-Modified 标头的内容时都会发送 If-Modified-Since 标头，因此效果很好。

另请记住，某些版本的 IE（或其使用的 JScript-Runtime）仍然在处理 GZIP 传输的内容时存在问题。

哦。 我知道这不是问题的一部分，但 Acrobat 在某些版本中也是如此。 我在使用 gzip 传输编码提供 PDF 时遇到过白屏的情况。

Answer 4

您可以使用 mod_rewrite 试试运气。

创建一个脚本，通过例如 $_SERVER['QUERY_STRING'] 将本地静态文件名作为输入，并以压缩形式输出。 许多提供商不允许使用 .htaccess 文件配置 mod_rewrite 或将其完全禁用。

如果您之前没有使用过 rewrite，我推荐一本很好的初学者指南，例如 这个。
这样你就可以让 apache 将所有对静态文件的请求重定向到 php 脚本。 例如，style.css 将被重定向到 compress.php?style.css 。

与往常一样，对您接受的输入要极其谨慎，否则您就会遇到 XSS 漏洞！

Answer 5

您可以提前对 CSS 和 JavaScript 文件进行 gzip，而不是在用户请求 CSS 和 JavaScript 文件时动态进行 gzip。 只要 Apache 为他们提供正确的标头，您就是黄金。

例如，在 Mac OS X 上，在命令行上对文件进行 gzip 压缩就像这样简单：

gzip -c styles.css > styles-gzip.css

但可能不是适合您的工作流程。