feat: optimize assets files.

client/config/webpack.config.js

@@ -24,6 +24,7 @@ const getClientEnvironment = require('./env');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
 const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
+const CompressionPlugin = require("compression-webpack-plugin");
 
 const postcssNormalize = require('postcss-normalize');
 
@@ -647,6 +648,15 @@ module.exports = function(webpackEnv) {
           // The formatter is invoked directly in WebpackDevServerUtils during development
           formatter: isEnvProduction ? typescriptFormatter : undefined,
         }),
+      // Gzip compression.
+      isEnvProduction &&
+        new CompressionPlugin({
+          // asset: "[path].gz[query]",
+          algorithm: "gzip",
+          test: /\.js$|\.css$|\.html$/,
+          threshold: 10240,
+          minRatio: 0.8
+        })
     ].filter(Boolean),
     // Some libraries import Node modules but don't use them in the browser.
     // Tell webpack to provide empty mocks for them so importing them works.

client/package.json

@@ -133,6 +133,7 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@welldone-software/why-did-you-render": "^6.0.0-rc.1",
+    "compression-webpack-plugin": "^6.1.0",
     "http-proxy-middleware": "^1.0.0",
     "react-query-devtools": "^2.1.1",
     "redux-devtools": "^3.5.0",