配置Webpack与Express Gzip压缩后仍未加载.gz文件问题排查

看起来你已经把Gzip压缩的配置搭起来了，但浏览器还是没吃到压缩后的文件，我帮你梳理几个最可能的问题和解决办法：

1. Express中间件顺序搞反了，导致Gzip路由根本没触发 #

你当前的代码里，先注册了express.static('dist')，然后才写了处理.js的get路由。但Express的中间件是按顺序执行的——当请求来的时候，express.static会先匹配到index_bundle.js，直接返回文件，后面的Gzip处理路由根本没机会运行。

修复方案： #

把Gzip的处理逻辑移到express.static前面，并且加上浏览器是否支持Gzip的检查（不然给不支持Gzip的浏览器返回.gz文件会报错）：

if (process.env.NODE_ENV === 'production') {
  // 先处理Gzip逻辑，再交给静态文件中间件
  app.get('*.js', (req, res, next) => {
    // 检查浏览器请求头是否支持Gzip
    if (req.headers['accept-encoding']?.includes('gzip')) {
      req.url += '.gz';
      res.set('Content-Encoding', 'gzip');
      res.set('Content-Type', 'application/javascript'); // 必须设置正确的MIME类型，否则浏览器解析失败
    }
    next(); // 把请求传递给后面的static中间件
  });

  // 静态文件中间件放在Gzip处理之后
  app.use(express.static('dist'), router);

  app.get('/*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
  });
} else {
  app.use('/', router);
}

2. 浏览器缓存了旧的未压缩文件 #

如果之前已经加载过未压缩的index_bundle.js，Chrome可能会缓存它。试试强制刷新页面（Ctrl+Shift+R），或者在Chrome DevTools的Network面板勾选「Disable cache」，再重新加载看看。

3. 没检查请求头，直接返回Gzip文件 #

你的原代码里没有判断浏览器是否支持Gzip就直接给req.url加.gz——如果浏览器不支持Gzip（虽然现代浏览器基本都支持，但万一呢？），返回的文件会无法解析，浏览器可能会 fallback 到原文件。

上面的修复方案已经加了req.headers['accept-encoding']的检查，解决这个问题。

4. 更省心的替代方案：用express-static-gzip中间件 #

手动写路由容易出错，推荐用专门处理静态文件压缩的express-static-gzip，它会自动帮你做这些事：检查请求头、匹配.gz文件、设置响应头，非常省心。

步骤： #

1. 安装依赖：

npm install express-static-gzip

2. 修改server.js的生产环境代码：

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

if (process.env.NODE_ENV === 'production') {
  app.use(expressStaticGzip('dist', {
    orderPreference: ['gzip'], // 优先用Gzip
    enableBrotli: false // 如果你没生成Brotli压缩文件就关掉，否则可以打开
  }), router);

  app.get('/*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
  });
} else {
  app.use('/', router);
}

最后验证一下： #

在Chrome DevTools的Network面板里，找到index_bundle.js的请求：

• 看Request Headers里有没有Accept-Encoding: gzip, deflate, br
• 看Response Headers里有没有Content-Encoding: gzip
• 看Size列，应该显示的是压缩后的大小（比如375kB左右，而不是1.49MB）

如果这些都符合，就说明Gzip生效了。

内容的提问来源于stack exchange，提问作者Sachin Karia