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

Posted 2023-02-25

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

【英文标题】：How to set "Content Encoding" to enable gzip files for Webpack server

【发布时间】：2016-11-24 21:23:59

【问题描述】：

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

问题：

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

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

TIA

【问题讨论】：

你在生产环境中使用 webpack 来提供文件吗？

这可能会有所帮助：***.com/questions/23600229/…

【参考方案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();
);

【参考方案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
    ),
]