Why webpack is compressing my bundle by default

Question

In the company Im currently working for there is a react app that uses webpack 5. The webpack config file is like this:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require("webpack");
const path = require("path");
const deps = require("./package.json").dependencies;
const dotenv = require("dotenv").config();

module.exports = (env = {}) => {
  const mode = env.NODE_ENV === "prod" ? "production" : "development";

  return {
    entry: "./src/index",
    mode: mode,
    devtool: mode === "production" ? false : "source-map",
    devServer: {
      static: path.join(__dirname, "dist"),
      port: 3000,
      hot: true,
      historyApiFallback: true,
      client: {
        overlay: false,
      },
    },
    resolve: {
      extensions: ['.tsx', '.ts', '.js'], 
    },
    output: {
      publicPath: "/",
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,  // TypeScript loader
          exclude: /node_modules/,
          use: 'ts-loader',
        },
        { test: /\.m?js/, type: "javascript/auto" },
        {
          test: /\.m?js/,
          resolve: {
            fullySpecified: false,
          },
        },
        {
          test: /\.m?js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env", "@babel/preset-react"],
              plugins: [
                "@babel/plugin-proposal-class-properties",
                "@babel/plugin-transform-async-to-generator",
                "@babel/plugin-syntax-jsx",
                "@babel/plugin-syntax-dynamic-import",
              ],
            },
          },
        },
        {
          test: /\.scss$/,
          use: [
            mode !== "production"
              ? "style-loader"
              : MiniCssExtractPlugin.loader,
            "css-loader",
            "sass-loader",
          ],
        },
        {
          test: /\.css$/,
          use: [
            mode !== "production"
              ? "style-loader"
              : MiniCssExtractPlugin.loader,
            "css-loader",
          ],
        },
        {
          test: /\.(png|svg|jpg|gif|ico)$/,
          use: ["file-loader"],
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          use: [
            {
              loader: "file-loader",
            },
          ],
        },
        {
          test: /\.json$/,
          loader: "json-loader",
        },
        {
          test: /\.txt$/i,
          use: "raw-loader",
        },
      ],
    },
    plugins: [
      new ModuleFederationPlugin({
        name: "mainApp",
        library: { type: "var", name: "mainApp" },
        remotes: {
          linkManagement: "linkManagement",
        },
        shared: {
          "react-router-dom": {
            singleton: true,
          },
          "react-dom": {
            singleton: true,
          },
          react: {
            requiredVersion: deps.react,
            singleton: true,
          },
          "component-lib": {
            singleton: true,
          },
        },
      }),
      new HtmlWebpackPlugin({
        template: "./public/index.html",
      }),
      new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css",
      }),
      new webpack.DefinePlugin({
        VERSION: JSON.stringify("3.0.67"),
        ENV: JSON.stringify(env.NODE_ENV),
        AUTH0_CONFIG_DOMAIN: JSON.stringify(process.env.AUTH0_CONFIG_DOMAIN),
        //some other env vars here
      }),
    ],
  };
};

The app is rather slow so I thought about compressing the bundle using gzip. Before doing that I wanted to see how much space and how long does it take to fetch the bundle. When I build the app I see the /dist directory is created and there is a file called main.js (among others). When I run the app I go to localhost:3000 and I see in the network request that main.js file being fetched. However, I already see this in the Response Headers

Content-Encoding: gzip

I see no files that end in .gz in the /dist directory. Why is this main.js app being gzipped by default?

In the docs it specically says that if you want to compress you need to install a plugin

https://webpack.js.org/plugins/compression-webpack-plugin/

If I go ahead and install the plugin and copy the code provided by the docs I can successfully see the files ending in .gz in my /dist directory. However, when I go to localhost:3000 the manin.js file has the same size and takes the same time as before.

Am I missing something?