4

I use webpack to bundle my application to bundle.gzip using the compress plugin.

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

And then I have an express server that serves the everything web pack has bundled and I add content-encoding to the response. 

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)

This works well in every browser except for firefox which when I open the console see this.

enter image description here

What could the problem be I think the problem has something to do with the content-encoding

mplungjan
  • 169,008
  • 28
  • 173
  • 236
user3476614
  • 537
  • 2
  • 8
  • 26

1 Answers1

6

You need to set Content-Type for the responses.

// 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();
});
Kushagra Vaish
  • 76
  • 2
  • This solved my problem, I was missing `res.set('Content-Type', 'text/javascript');` The weird thing is that it works without it on Chrome but fails on FF. – Technotronic Apr 04 '20 at 18:00
  • `text/javascript` is considered obsolete. Use `application/javascript` instead, See https://stackoverflow.com/questions/6122905/what-is-difference-between-text-javascript-and-application-javascript/6122938 – Alfonso Embid-Desmet May 21 '20 at 18:26