浏览器无法识别经Compression-Webpack-Plugin压缩、Webpack-S3-Plugin上传的.gz文件

问题根因 #

你当前配置的核心矛盾是：

• CompressionPlugin 开启了 deleteOriginalAssets: true，删除了原 .js/.css 文件，仅保留了带 .gz 后缀的压缩文件
• ManifestPlugin 生成的资源映射表中，index.js/index.css 对应的路径仍为不带 .gz 的原始文件名，HTML模板通过映射表引用的资源路径在S3上实际不存在
• 你在S3上传配置中虽然设置了 ContentEncoding: gzip，但资源本身带 .gz 后缀，浏览器请求不带后缀的路径自然找不到对应资源

推荐解决方案（无需修改HTML模板） #

这种方案兼容性最好，也是行业通用做法：上传S3时去掉 .gz 后缀，保留资源原始文件名，同时保留 ContentEncoding: gzip 头配置。浏览器请求正常的 .js/.css 路径时，S3返回的是gzip压缩后的内容，浏览器会自动根据响应头解压，完全无感。

需要修改两处配置：

1. 修改 CompressionPlugin 的 filename 配置，把生成的压缩文件路径改为不带 .gz 的原始文件名，避免后续还要重命名：

new CompressionPlugin({
  test: /\.(js|css)$/,
  // 替换原filename配置，生成的压缩文件直接使用原始文件名，不带.gz后缀
  filename: '[path][base]',
  algorithm: 'gzip',
  deleteOriginalAssets: true,
}),

2. 调整S3上传时的 ContentEncoding 判断逻辑，因为现在文件名已经不带 .gz 了，直接对所有 .js/.css 资源添加gzip头即可：

ContentEncoding(fileName) {
  if (/\.(js|css)$/.test(fileName)) {
    return 'gzip';
  }
},

注意：如果你使用DllPlugin预构建的 vendor.js 没有经过gzip压缩，需要对dll构建流程也添加相同的压缩配置，保证所有js/css资源都统一处理。

备选方案（修改模板引用带.gz后缀的资源） #

如果不想改webpack压缩配置，也可以直接修改模板和manifest映射，让HTML直接引用带 .gz 的资源：

<link rel="stylesheet" href="<%= manifest['index.css'] %>.gz" />
<script type="text/javascript" src="<%= cdnRoot %><%= manifest['vendor.js'] %>.gz"></script>
<script type="text/javascript" src="<%= manifest['index.js'] %>.gz"></script>

注意：这种方案需要确保所有访问用户的浏览器都支持gzip压缩，对老旧设备的兼容性不如第一种方案。

内容的提问来源于stack exchange，提问作者Paul C