Add gzip and brotli to create static files

tdm-be/package.json

@@ -22,6 +22,7 @@
     "express": "^4.19.2",
     "express-basic-auth": "^1.2.1",
     "express-rate-limit": "^7.2.0",
+    "express-static-gzip": "^2.1.7",
     "md5": "^2.3.0",
     "multer": "^1.4.5-lts.1",
     "node-cron": "^3.0.3",

tdm-be/src/app.ts

@@ -12,6 +12,7 @@ import cors from 'cors';
 import express from 'express';
 import basicAuth from 'express-basic-auth';
 import rateLimit from 'express-rate-limit';
+import expressStaticGzip from 'express-static-gzip';
 import cron from 'node-cron';
 import swaggerUi from 'swagger-ui-express';
 
@@ -62,7 +63,7 @@ app.use('/swagger-config', auth, swaggerUi.serve, swaggerUi.setup(swaggerFile));
 
 const dirname = process.cwd();
 
-app.use(express.static(path.join(dirname, 'public')));
+app.use(expressStaticGzip(path.join(dirname, 'public'), { enableBrotli: true }));
 
 // Rewrite reverse proxy, this is required because we use a single page application
 // We need to declare all route used by the front application

tdm-fe/package.json

@@ -42,6 +42,7 @@
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.57.0",
     "md5": "^2.3.0",
+    "rollup-plugin-gzip": "^3.1.2",
     "sass": "^1.75.0",
     "stylelint": "^16.3.1",
     "stylelint-config-standard-scss": "^13.1.0",

tdm-fe/vite.config.ts

@@ -1,11 +1,17 @@
 import react from '@vitejs/plugin-react';
 import md5 from 'md5';
+import gzipPlugin from 'rollup-plugin-gzip';
 import { defineConfig } from 'vite';
 import eslint from 'vite-plugin-eslint';
 import stylelint from 'vite-plugin-stylelint';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
-const regex = /(.*node_modules\/)([^\/]+)(.*)/;
+import { promisify } from 'node:util';
+import { brotliCompress } from 'node:zlib';
+
+const brotliPromise = promisify(brotliCompress);
+
+const regex = /(.*node_modules\/)([^/]+)(.*)/;
 
 const linter =
     process.env.VITE_ENV === 'prod'
@@ -18,12 +24,27 @@ const linter =
           ];
 
 export default defineConfig({
-    plugins: [react(), tsconfigPaths(), ...linter],
-    css: {
-        devSourcemap: process.env.VITE_SOURCE_MAP === 'true',
-    },
+    plugins: [
+        react(),
+        tsconfigPaths(),
+        gzipPlugin({
+            customCompression: (content) => brotliPromise(Buffer.from(content)),
+            fileName: '.br',
+            minSize: 1000,
+            gzipOptions: {
+                level: 9,
+            },
+        }),
+        gzipPlugin({
+            minSize: 1000,
+            gzipOptions: {
+                level: 9,
+            },
+        }),
+        ...linter,
+    ],
     build: {
-        sourcemap: process.env.VITE_SOURCE_MAP === 'true',
+        sourcemap: true,
         rollupOptions: {
             output: {
                 manualChunks: (id, meta) => {
@@ -36,13 +57,13 @@ export default defineConfig({
         },
         minify: 'terser',
         terserOptions: {
-            sourceMap: process.env.VITE_SOURCE_MAP === 'true',
-            ecma: 2018,
+            sourceMap: true,
+            ecma: 2020,
             compress: {
-                ecma: 2018,
+                ecma: 2020,
             },
             format: {
-                ecma: 2018,
+                ecma: 2020,
             },
         },
     },