Why is NodeJS only showing GZip compression after hard refresh? - node.js

Question

I have a ReactJs no CRA, NodeJs and custom webpack configuration. Lighthouse told me to enable text compression and so I looked into this and since NodeJS is loading React for my view, it only shows in the network that I have Gzip compression enabled when I do CTRL+SHIFT+R (hard refresh) however if I just do a Ctrl+R (soft refresh it doesn't show that it's gzipped.
Here is a soft refresh screenshot showing that it's not gzipped if I keep doing a soft refresh in the network console, it will not show that it's gzipped.
However if I do a hard refresh in this screenshot it shows its suddenly gzipped and I don't know why....
Here is my NodeJS code that acts as my server.
const express = require("express");
const compression = require("compression");
const bodyParser = require("body-parser");
const path = require("path");
const cors = require("cors");
const router = express.Router();
const dotenv = require("dotenv");
const config = dotenv.config({ path: path.join(__dirname, "../config/.env") });
const port = process.env.PORT || 5000;
var filePath = path.join(__dirname, "/../build/index.html");
const app = express();
var Blog = require("../routes/Blog");
var Schedule = require("../routes/Schedule");
var detailedReport = require("../routes/detailedReport");
var Login = require("../routes/Login");
var Admin = require("../routes/Admin");
var Forms = require("../routes/Forms");
var yelp = require("../routes/Yelp");
// compress the files in build directory
app.use(compression());
app.use(cors());
// Body Parser Middleware
app.use(bodyParser.json({ limit: "50mb" }));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept"
);
next();
});
// GET/POST Requests
app.use("/api", Blog);
app.use("/api", Schedule);
app.use("/api", detailedReport);
app.use("/api", Login);
app.use("/api", Admin);
app.use("/api", Forms);
app.use("/api", yelp);
// Serve static files on server
app.use(express.static(__dirname + "/../build"));
app.listen(port, () => {
console.log(`Server successfully started`);
});
Webpack Configuration:
const webpack = require("webpack");
const path = require("path");
const CompressionPlugin = require("compression-webpack-plugin");
const { EnvironmentPlugin } = require("webpack");
module.exports = {
entry: ["babel-polyfill", __dirname + "/src/index.js"],
devtool: "source-map",
output: {
path: path.join(__dirname, "/build"),
filename: "bundle.js",
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
query: {
presets: ["react", "env", "stage-0"],
},
},
},
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" },
],
},
{
test: /\.(png|jpg)$/,
use: {
loader: "file-loader",
},
},
],
},
plugins: [
new CompressionPlugin({
filename: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.css$|\.html$/,
minRatio: 0.8,
threshold: 10240,
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
}),
// Disable code splitting as it's creating many duplicate bundle profiles
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1,
}),
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify("production"),
}),
],
};