Why is my heroku app loading resources too long even after using gzip compression?

Question

I have a MEAN stack app hosted in Heroku. In my Express server, I use gzip (via compression middleware).

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const cors = require('cors');
const passport = require('passport');
const adminpassport = require('passport');
const mongoose = require('mongoose');
const config = require('./config/database');
// Connect to DB

mongoose.connect(config.database);
mongoose.connection.on('connected',()=>{
    console.log('Connected to database '+config.database);
});

mongoose.connection.on('error',(err)=>{
    console.log('DB Error '+err);
});

const compression = require('compression');
const app = express();
// Static Folder
app.use(express.static(path.join(__dirname, 'public')));
app.use(compression());
// Body Parser Middleware
app.use(bodyParser.json());

...

app.use(function(req, res) {
    res.sendFile(path.join(__dirname, '/public', 'index.html'));
});

// Index Route
app.get('/', (req, res)=>{
    res.send('Invalid enpoint');
    
});



app.listen(port, ()=>{
    console.log("Server started on port "+port);
});

The problem is that the Angular main.js file (that is orginally 3.2mb, compressed to 575kb) is still seemingly being download as if it's still the uncompressed size. Here's an image of the load times:

I know my internet connection is fine (around 20mbps). Is there anything I'm missing? Is there something wrong in my implementation of gzip? Or even my Heroku dyno? This app is currently on the hobby dyno. I did change it to the professional one but didnt notice any difference.

Answer 1

I'm not sure what is your environment, but you can try this, is completely functional for me.

// Get dependencies
const express = require('express');
const path = require('path');
const http = require('http');
const bodyParser = require('body-parser');
const compression = require('compression');

const runApp = async() => {
  const app = express();
   app.use(compression({
      filter: function (req, res) {
        return (/json|text|javascript|css|font|svg/).test(res.getHeader('Content-Type'));
      },
      level: 9
  }));
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({ extended: false }));
  app.use(express.static(path.join(__dirname, 'public')));



  app.get('*', (req, res) => {
    console.log('Front end called');
    res.sendFile(path.join(__dirname, 'public/index.html'));
  });

  /**
   * Get port from environment and store in Express.
   */
  const port = process.env.PORT || '8081';
  app.set('port', port);

  /**
   * Create HTTP server.
   */
  const server = http.createServer(app);

  /**
   * Listen on provided port, on all network interfaces.
   */
  server.listen(port, () => console.log(`API running on localhost:${port}`));
};
runApp();