Serve gzip files in node throws net::ERR_CONTENT_DECODING_FAILED in browser

Question

I'm trying to follow this in order to serve some static compressed files. https://medium.com/@rajaraodv/two-quick-ways-to-reduce-react-apps-size-in-production-82226605771a

I'm using webpack compression plugin to generate the gzip files.

new CompressionPlugin({
    asset: '[path].gz[query]',
    algorithm: 'gzip',
    test: /\.(js|css)$/,
    deleteOriginalAssets: true
})

On my server I have this middleware.

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

When I'm running the app, in browser I'm getting GET http://localhost:8080/app.js net::ERR_CONTENT_DECODING_FAILED

Probably, I still have to do something more but no idea what exactly.

Thank you, Ionut

Answer 1

Looks like you're missing the content type. Use this code in your express server:

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