如何设置“内容编码”以启用 Webpack 服务器的 gzip 文件

Question

我使用 Webpack 服务器 创建了一个 angular-universal 应用程序。我已经使用“compression-webpack-plugin”来压缩我的 js/html 文件，以便我可以将它们从服务器提供给浏览器。已通过该插件正确创建压缩文件。

问题：

虽然浏览器显示它可以接受 gzip 或 deflate 文件（Accept-Encoding:gzip、deflate、sdch），但我的 webpack 服务器没有将 gzip 文件发送到浏览器。 p>

如何配置我的 webpack 服务器，使其在浏览器发出调用时将 gzip 文件发送到浏览器？

TIA

Answer 1

这是我的 webpack 和 express 服务器设置：

// webpack.config.js

plugins: [
  ...
  new CompressionPlugin({   <-- Add this
    asset: "[path].gz[query]",
    algorithm: "gzip",
    test: /\.js$|\.css$|\.html$/,
    threshold: 10240,
    minRatio: 0.8
  })
...
]

// server.js

app.get('*.js', function(req, res, next) {
  req.url = req.url + '.gz';
  res.set('Content-Encoding', 'gzip');
  res.set('Content-Type', 'text/javascript');
  next();
});

app.get('*.css', function(req, res, next) {
  req.url = req.url + '.gz';
  res.set('Content-Encoding', 'gzip');
  res.set('Content-Type', 'text/css');
  next();
});

Answer 2

Isaac 的回答有所帮助，但我的问题是我使用的样板中有以下内容：

// http://expressjs.com/en/starter/static-files.html
app.use(express.static('public'));

当你有这个时，你必须把这个'路线'放在前面：

// Must come before the use public folder!!
app.get('*.gz', function(req, res, next) {
  res.set('Content-Encoding', 'gzip');
  res.set('Content-Type', 'text/javascript');
  next();
});

// AFTER Gzip fix
app.use(express.static('public'));

我也无法将文件命名为与原始文件相同的名称，因此我将其更改为 .gz（如果您尝试将其命名为与它生成的包相同的名称，webpack 会抱怨 + 它似乎甚至不起作用在最新的 webpack 中）

plugins: [
    new CompressionPlugin({
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
      threshold: 10240,
      minRatio: 0.8
    }),
]