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?
