Laravel/Vue项目开启文本压缩失败，如何解决？

我按照Lighthouse给出的方案，在.htaccess文件中添加了mod_deflate相关配置，但浏览器网络面板始终看不到content-encoding响应头，压缩未生效。以下是针对这个问题的排查步骤和解决办法：

一、确认Apache核心模块是否启用 #

mod_deflate和mod_filter是实现文本压缩的必要模块，很多服务器默认未开启，需要手动启用：

• Ubuntu/Debian系统：
  执行命令启用模块：

  sudo a2enmod deflate filter
  

  重启Apache服务：

  sudo systemctl restart apache2
  

• CentOS/RHEL系统：
  编辑httpd.conf配置文件，确保以下两行没有被注释：

  LoadModule deflate_module modules/mod_deflate.so
  LoadModule filter_module modules/mod_filter.so
  

  重启httpd服务：

  sudo systemctl restart httpd
  

二、优化.htaccess压缩配置 #

替换原有压缩配置为更全面的版本，同时添加代理兼容规则：

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Send Requests To Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

# 文本压缩配置
<IfModule mod_deflate.c>
    # 全局启用压缩
    SetOutputFilter DEFLATE

    # 排除无需压缩的二进制/大文件类型
    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
    SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
    SetEnvIfNoCase Request_URI \.(?:pdf|doc|txt|rtf|ppt)$ no-gzip dont-vary
    SetEnvIfNoCase Request_URI \.(?:avi|mov|mp3|mp4|flv)$ no-gzip dont-vary

    # 针对文本类资源设置压缩
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/json
    AddOutputFilterByType DEFLATE application/vnd.api+json

    # 确保代理服务器正确传递压缩标识
    Header append Vary Accept-Encoding
</IfModule>

三、验证压缩是否生效 #

• 强制清除浏览器缓存（Ctrl+Shift+R），重新查看网络面板，检查响应头是否存在content-encoding: gzip或deflate
• 使用curl命令快速验证：

  curl -H "Accept-Encoding: gzip" -I https://你的域名.com
  

  查看返回的响应头是否包含Content-Encoding: gzip

四、替代方案：Laravel中间件实现压缩 #

如果Apache模块配置受限，可以通过Laravel中间件直接处理响应压缩：

1. 创建压缩中间件：

   php artisan make:middleware CompressResponse
   

2. 在app/Http/Middleware/CompressResponse.php中写入逻辑：

   <?php
   
   namespace App\Http\Middleware;
   
   use Closure;
   use Illuminate\Http\Request;
   
   class CompressResponse
   {
       public function handle(Request $request, Closure $next)
       {
           $response = $next($request);
           $acceptEncoding = $request->header('Accept-Encoding');
   
           // 仅当客户端支持gzip且未设置压缩头时生效
           if (strpos($acceptEncoding, 'gzip') !== false && !$response->headers->has('Content-Encoding')) {
               $response->setContent(gzencode($response->getContent(), 9));
               $response->headers->set('Content-Encoding', 'gzip');
               $response->headers->set('Vary', 'Accept-Encoding');
               $response->headers->set('Content-Length', strlen($response->getContent()));
           }
   
           return $response;
       }
   }
   

3. 在app/Http/Kernel.php的$middleware数组中注册该中间件：

   protected $middleware = [
       // ... 其他已存在的中间件
       \App\Http\Middleware\CompressResponse::class,
   ];
   

五、Vue静态资源预压缩 #

对于Vue打包后的静态文件，可以在构建阶段直接生成gzip压缩文件，减少服务器实时压缩开销：

1. 在vue.config.js中配置webpack压缩插件：

   const CompressionPlugin = require('compression-webpack-plugin');
   
   module.exports = {
     configureWebpack: {
       plugins: [
         new CompressionPlugin({
           algorithm: 'gzip',
           test: /\.(js|css|html|svg)$/,
           threshold: 8192, // 文件大于8KB才压缩
           minRatio: 0.8 // 压缩率小于0.8才保留压缩文件
         })
       ]
     }
   };
   

2. 安装依赖并重新打包：

   npm install compression-webpack-plugin --save-dev
   npm run build
   

   打包后dist目录会生成对应的.gz文件，服务器会自动识别并返回压缩资源（需确保服务器支持静态gzip文件解析）

内容的提问来源于stack exchange，提问作者Salil Rajkarnikar