语法错误：使用 gzip 提供文件时，仅在 Firefox 中抛出非法字符

Question

我使用 webpack 使用压缩插件将我的应用程序捆绑到 bundle.gzip。

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

然后我有一个快速服务器，它为 web 包捆绑的所有内容提供服务，我将内容编码添加到响应中。

const path = require('path')
const express = require('express')

const app = express()
const server = require('http').createServer(app)

app.get('*.js', (req, res, next) => {
    req.url = `${req.url}.gz`
    res.set('Content-Encoding', 'gzip')
    next()
})

app.use(express.static(path.resolve(__dirname, 'dist')))
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist/index.html'))
})
// eslint-disable-next-line
console.log("Server listening on port 8500")
server.listen(8500)

这在每个浏览器中都很有效，除了 firefox，当我打开控制台时会看到这个。

可能是什么问题我认为问题与内容编码有关

Answer 1

您需要设置Content-Type响应。

// For 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();
});

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