From 1f61a1e5c1d1459afbf24fc1409c772d8f37b8ba Mon Sep 17 00:00:00 2001
From: Vic <victor.ekpo@gmail.com>
Date: Sat, 13 Jul 2024 21:59:11 -0500
Subject: [PATCH] add compression

---
 client/notes/Wrangler.md |  1 +
 client/package.json      |  3 +++
 client/webpack.config.js | 25 +++++++++++++++++++++++--
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/client/notes/Wrangler.md b/client/notes/Wrangler.md
index ce3d0cb..e827d35 100644
--- a/client/notes/Wrangler.md
+++ b/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
\ No newline at end of file
diff --git a/client/package.json b/client/package.json
index 97e2b31..4fde489 100644
--- a/client/package.json
+++ b/client/package.json
@@ -29,8 +29,10 @@
     "@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",
@@ -38,6 +40,7 @@
     "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"
diff --git a/client/webpack.config.js b/client/webpack.config.js
index 66352b8..61b7b24 100644
--- a/client/webpack.config.js
+++ b/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',
+    },
+  }
 };