chore: static assets optimization and nginx config update

govtool/frontend/Dockerfile

@@ -47,8 +47,19 @@ RUN npm install
 COPY . .
 RUN npm run build
 
-FROM nginx:stable-alpine
+FROM fholzer/nginx-brotli:v1.23.4
+
 EXPOSE 80
+
 COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+RUN echo '\
+# Brotli configuration\n\
+brotli on;\n\
+brotli_comp_level 6;\n\
+brotli_static on;\n\
+brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml+rss text/javascript;\n\
+' > /etc/nginx/conf.d/brotli.conf
+
 COPY --from=builder /src/maintenance-page/index.html /usr/share/nginx/html/maintenance.html
 COPY --from=builder /src/dist /usr/share/nginx/html

govtool/frontend/Dockerfile.qovery

@@ -30,8 +30,19 @@ RUN npm install
 COPY . .
 RUN npm run build
 
-FROM nginx:stable-alpine
+FROM fholzer/nginx-brotli:v1.23.4
+
 EXPOSE 80
+
 COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+RUN echo '\
+# Brotli configuration\n\
+brotli on;\n\
+brotli_comp_level 6;\n\
+brotli_static on;\n\
+brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml+rss text/javascript;\n\
+' > /etc/nginx/conf.d/brotli.conf
+
 COPY --from=builder /src/maintenance-page/index.html /usr/share/nginx/html/maintenance.html
 COPY --from=builder /src/dist /usr/share/nginx/html

govtool/frontend/nginx.conf

@@ -3,6 +3,26 @@ server {
   root /usr/share/nginx/html;
   error_page 503 @maintenance;
 
+  gzip on;
+  gzip_static on;
+  gzip_vary on;
+  gzip_proxied any;
+  gzip_comp_level 6;
+  gzip_buffers 16 8k;
+  gzip_http_version 1.1;
+  gzip_types text/plain text/css application/javascript application/json application/xml application/xml+rss text/javascript;
+
+  location ~* \.(?:css|js|jpg|jpeg|gif|png|ico|svg|woff2?)$ {
+    expires 1y;
+    add_header Cache-Control "public, max-age=31536000, immutable";
+    try_files $uri =404;
+
+    types {
+      application/javascript js;
+      text/css css;
+    }
+  }
+
   location / {
     index index.html;
     try_files $uri $uri /index.html;

govtool/frontend/src/consts/images.ts

@@ -1,17 +1,17 @@
 export const IMAGES = {
   appLogo: "/images/CardanoLogo.svg",
-  appLogoWithoutText: "/images/AppLogoWithoutText.png",
-  bgBlue: "/images/BGBlue.png",
-  bgOrange: "/images/BGOrange.png",
-  errorPageImage: "/images/ErrorPageImage.png",
-  govActionDefaultImage: "/images/GovActionDefault.png",
-  govActionDelegateImage: "/images/GovActionDelegate.png",
-  govActionListImage: "/images/GovActionList.png",
-  govActionRegisterImage: "/images/GovActionRegister.png",
-  heroImage: "/images/HeroImage.png",
-  proposeGovActionImage: "/images/ProposeGovAction.png",
-  directVoterImage: "/images/GovActionsDirectVoter.png",
-  successImage: "/images/Success.png",
-  warningImage: "/images/Warning.png",
-  warningYellowImage: "/images/WarningYellow.png",
+  appLogoWithoutText: "/images/AppLogoWithoutText.webp",
+  bgBlue: "/images/BGBlue.webp",
+  bgOrange: "/images/BGOrange.webp",
+  errorPageImage: "/images/ErrorPageImage.webp",
+  govActionDefaultImage: "/images/GovActionDefault.webp",
+  govActionDelegateImage: "/images/GovActionDelegate.webp",
+  govActionListImage: "/images/GovActionList.webp",
+  govActionRegisterImage: "/images/GovActionRegister.webp",
+  heroImage: "/images/HeroImage.webp",
+  proposeGovActionImage: "/images/ProposeGovAction.webp",
+  directVoterImage: "/images/GovActionsDirectVoter.webp",
+  successImage: "/images/Success.webp",
+  warningImage: "/images/Warning.webp",
+  warningYellowImage: "/images/WarningYellow.webp",
 };

govtool/frontend/vite.config.ts

@@ -16,6 +16,82 @@ const viteConfig = defineViteConfig({
   define: {
     "process.env": {},
   },
+  build: {
+    chunkSizeWarningLimit: 512,
+    rollupOptions: {
+      output: {
+        manualChunks: (id) => {
+          if (id.includes("node_modules")) {
+            return id
+              .toString()
+              .split("node_modules/")[1]
+              .split("/")[0]
+              .toString();
+          }
+          if (id.includes("src/components/atoms")) {
+            return "atoms";
+          }
+          if (id.includes("src/components/molecules")) {
+            return "molecules";
+          }
+          if (id.includes("src/components/organisms")) {
+            return "organisms";
+          }
+          if (id.includes("src/consts")) {
+            return "context";
+          }
+          if (id.includes("src/context")) {
+            return "context";
+          }
+          if (id.includes("src/hooks")) {
+            return "hooks";
+          }
+          if (id.includes("src/pages")) {
+            return "consts";
+          }
+          if (id.includes("src/services")) {
+            return "consts";
+          }
+          if (id.includes("src/utils")) {
+            return "utils";
+          }
+
+          // Specific handling for the Emurgo library
+          if (id.includes("@emurgo/cardano-serialization-lib-asmjs")) {
+            if (
+              id.includes("Transaction") ||
+              id.includes("Address") ||
+              id.includes("Fee")
+            ) {
+              return "cardano-tx";
+            }
+            if (
+              id.includes("Voting") ||
+              id.includes("Governance") ||
+              id.includes("DRep")
+            ) {
+              return "cardano-voting";
+            }
+            if (id.includes("Plutus") || id.includes("Script")) {
+              return "cardano-scripts";
+            }
+            if (id.includes("Certificate") || id.includes("Credential")) {
+              return "cardano-certs";
+            }
+            return "cardano-core";
+          }
+        },
+      },
+    },
+    minify: "terser",
+    terserOptions: {
+      compress: {
+        keep_infinity: true,
+        drop_console: true,
+        drop_debugger: true,
+      },
+    },
+  },
   resolve: {
     alias: [
       { find: "@", replacement: path.resolve(__dirname, "./src") },