Vue项目Webpack Compression Plugin压缩不生效无content-encoding响应头排查

核心问题说明 #

compression-webpack-plugin 的作用仅为构建阶段生成对应后缀的压缩静态文件（.br/.gz），本身不处理HTTP请求的响应逻辑，所以即使Webpack配置正确，没有服务端的配套配置，浏览器请求时依然不会返回带content-encoding头的压缩资源。 #

第一步：验证Webpack侧配置是否生效 #

执行生产构建命令 npm run build，检查输出的dist目录下是否存在.js.br/.css.br/.js.gz/.css.gz格式的文件：

• 存在：Webpack侧配置无问题，直接看第二步的服务端配置
• 不存在：按以下优化点调整Webpack配置

Webpack配置优化点 #

你当前使用的6.x版本compression-webpack-plugin与Webpack4兼容，调整如下即可：

1. 仅在生产环境启用压缩，避免拖慢开发环境构建速度，调整chainWebpack中的压缩配置：

chainWebpack: config => {
  // 原有其他配置保持不变
  config.when(process.env.NODE_ENV === 'production', config => {
    // Brotli压缩配置
    config
      .plugin('brotliCompress')
      .use(CompressionWebpackPlugin, [{
        exclude: /.map$/,
        cache: true,
        algorithm: 'brotliCompress',
        test: /\.(js|css|html|svg)$/,
        filename: '[path][base].br', // 显式指定压缩后文件名
        threshold: 0, // 调试阶段设为0，所有符合条件的文件都压缩
        minRatio: 1, // 调试阶段设为1，不管压缩率都生成文件
        compressionOptions: { level: 11 } // Brotli最高压缩级别
      }])
    // Gzip压缩配置
    config
      .plugin('gzipCompress')
      .use(CompressionWebpackPlugin, [{
        exclude: /.map$/,
        cache: true,
        algorithm: 'gzip',
        test: /\.(js|css|html|svg)$/,
        filename: '[path][base].gz',
        threshold: 0,
        minRatio: 1,
        compressionOptions: { level: 9 } // Gzip最高压缩级别
      }])
  })
}

2. vue-cli-plugin-compression的Missing generator错误是插件版本与Vue CLI 4.x兼容性问题，无需额外使用该插件，直接用上述Webpack Chain配置即可。

第二步：服务端配套配置 #

根据你使用的服务端环境选择对应配置：

1. 生产环境Nginx配置

需要启用静态压缩资源读取功能，在Nginx站点配置中添加如下规则：

http {
  # 开启gzip静态资源读取，优先返回.gz文件
  gzip_static on;
  # 开启brotli静态资源读取（需要Nginx已编译brotli模块）
  brotli_static on;
  
  server {
    listen 80;
    server_name 你的站点域名;
    root 你的dist目录路径;
    index index.html;
    
    # 其他站点配置保持不变
  }
}

配置后重启Nginx即可生效，浏览器请求时会自动根据Accept-Encoding请求头返回对应压缩格式的资源，自动携带content-encoding响应头。

2. 本地开发环境配置

Vue CLI内置的webpack-dev-server默认仅支持gzip压缩实时返回，修改vue.config.js添加如下配置即可本地测试gzip压缩：

module.exports = {
  // 原有其他配置保持不变
  devServer: {
    compress: true // 开启devServer的gzip压缩
  }
}

如果需要本地测试Brotli压缩，需要额外安装对应devServer中间件，通常开发环境无需测试压缩功能，生产环境配置后验证即可。

3. Node.js Express服务端配置

安装对应静态压缩资源中间件，配置如下：

const express = require('express');
const expressStaticGzip = require('express-static-gzip');
const app = express();

app.use('/', expressStaticGzip('dist', {
  enableBrotli: true,
  orderPreference: ['br', 'gz']
}));

app.listen(3000);

内容的提问来源于stack exchange，提问作者Dan der Mensch