add compression

client/notes/Wrangler.md

@@ -4,3 +4,4 @@ Workers Can't fetch same worker - https://community.cloudflare.com/t/issue-with-
 Service Bindings - https://developers.cloudflare.com/workers/runtime-apis/bindings/service-bindings/
 Worker Request Headers - https://developers.cloudflare.com/fundamentals/reference/http-request-headers/
 Environment Variables - https://developers.cloudflare.com/workers/configuration/environment-variables/
+Adding Cache - https://www.raymondcamden.com/2023/08/06/adding-caching-to-a-cloudflare-worker

client/package.json

@@ -29,15 +29,18 @@
     "@babel/preset-react": "^7.24.7",
     "autoprefixer": "^10.4.19",
     "babel-loader": "^9.1.3",
+    "compression-webpack-plugin": "^11.1.0",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
+    "css-minimizer-webpack-plugin": "^7.0.0",
     "file-loader": "^6.2.0",
     "postcss": "^8.4.39",
     "postcss-loader": "^8.1.1",
     "sass": "^1.62.0",
     "sass-loader": "^13.2.2",
     "style-loader": "^4.0.0",
     "tailwindcss": "^3.4.4",
+    "terser-webpack-plugin": "^5.3.10",
     "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4"

client/webpack.config.js

@@ -1,11 +1,14 @@
 const path = require('path');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const CompressionPlugin = require('compression-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 
 module.exports = {
   mode: 'production',
   entry: './src/main.js',
   output: {
-    filename: 'bundle.js',
+    filename: 'bundle.[contenthash].js', // Use content hash for cache busting
     path: path.resolve(__dirname, 'dist'),
   },
   module: {
@@ -21,7 +24,7 @@ module.exports = {
         },
       },
       {
-        test: /\.css$/,
+        test: /\.[s]?css$/,
         use: ['style-loader', 'css-loader', 'postcss-loader', "sass-loader"],
       },
       {
@@ -42,6 +45,7 @@ module.exports = {
         { from: './public', to: '' }, // Copy all files from public directory to dist
       ],
     }),
+    new CompressionPlugin()
   ],
   resolve: {
     extensions: ['.js', '.jsx'],
@@ -50,4 +54,21 @@ module.exports = {
       '@public': path.resolve(__dirname, 'public'), // Alias for public folder
     }
   },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new CssMinimizerPlugin(),
+      new TerserPlugin({
+        terserOptions: {
+          format: {
+            comments: false,
+          },
+        },
+        extractComments: false,
+      }),
+    ],
+    splitChunks: {
+      chunks: 'all',
+    },
+  }
 };