improve performance

Dockerfile

@@ -5,7 +5,7 @@ WORKDIR /front
 COPY . .
 
 RUN npm install
-RUN npm run build
+RUN npm run build:prod
 
 FROM nginx:1.21.6-alpine as runner
 

package-lock.json

@@ -47,6 +47,7 @@
         "sass-loader": "^13.0.0",
         "style-loader": "^3.3.1",
         "tailwindcss": "^3.0.18",
+        "terser-webpack-plugin": "^5.3.3",
         "webpack": "^5.73.0",
         "webpack-cli": "^4.10.0",
         "webpack-dev-server": "^4.9.2"
@@ -12580,25 +12581,6 @@
       "integrity": "sha512-bRuZp3C0itgLKHu/VNxi66DN/XVkQG7xtoBVWxpvC5FhAqbOCP21+nPhULjnzEqd7xBMybp6KwytdUpZKEgpIQ==",
       "requires": {}
     },
-    "mobx": {
-      "version": "6.6.0",
-      "resolved": "https://registry.npmjs.org/mobx/-/mobx-6.6.0.tgz",
-      "integrity": "sha512-MNTKevLH/6DShLZcmSL351+JgiJPO56A4GUpoiDQ3/yZ0mAtclNLdHK9q4BcQhibx8/JSDupfTpbX2NZPemlRg=="
-    },
-    "mobx-react": {
-      "version": "7.5.0",
-      "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-7.5.0.tgz",
-      "integrity": "sha512-riHu0XZJA6f64L1iXZoAaDjVt6suYoy8I2HIfuz2tX3O4FFaAe4lVA2CoObttmUQTTFPM7j3Df6T4re0cHkghQ==",
-      "requires": {
-        "mobx-react-lite": "^3.4.0"
-      }
-    },
-    "mobx-react-lite": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-3.4.0.tgz",
-      "integrity": "sha512-bRuZp3C0itgLKHu/VNxi66DN/XVkQG7xtoBVWxpvC5FhAqbOCP21+nPhULjnzEqd7xBMybp6KwytdUpZKEgpIQ==",
-      "requires": {}
-    },
     "moment": {
       "version": "2.29.3",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.3.tgz",

package.json

@@ -3,25 +3,22 @@
   "version": "0.1.0",
   "scripts": {
     "dev": "webpack-dev-server",
-    "build": "webpack"
+    "build:dev": "webpack --mode development --progress",
+    "build:prod": "webpack --mode production --progress"
   },
   "dependencies": {
     "@liskhq/lisk-client": "^5.2.2",
     "@tailwindcss/forms": "^0.4.0",
-    "autoprefixer": "^10.4.5",
     "buffer": "^6.0.3",
     "chart.js": "^3.5.0",
     "chartjs-adapter-moment": "^1.0.0",
     "crypto-browserify": "^3.12.0",
-    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.5.0",
     "mobx": "^6.6.0",
     "mobx-react-lite": "^3.4.0",
     "moment": "^2.29.1",
     "net": "^1.0.2",
     "os-browserify": "^0.3.0",
     "path-browserify": "^1.0.1",
-    "postcss-loader": "^7.0.0",
     "process": "^0.11.10",
     "querystring-es3": "^0.2.1",
     "react": "^17.0.2",
@@ -38,13 +35,17 @@
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.17.12",
     "babel-loader": "^8.2.5",
+    "html-webpack-plugin": "^5.5.0",
     "css-loader": "^6.7.1",
     "html-loader": "^3.1.2",
     "postcss": "^8.4.5",
     "sass": "^1.52.3",
     "sass-loader": "^13.0.0",
     "style-loader": "^3.3.1",
+    "file-loader": "^6.2.0",
+    "postcss-loader": "^7.0.0",
     "tailwindcss": "^3.0.18",
+    "autoprefixer": "^10.4.5",
     "webpack": "^5.73.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.9.2"

webpack.config.js

@@ -16,16 +16,16 @@ const plugins = [
   require('tailwindcss')
 ];
 
-module.exports = {
+module.exports = (env, argv) => ( {
   entry: './src/main.jsx',
-  mode: 'development',
+  mode: argv.mode || 'development',
-  devtool: 'eval-source-map',
+  devtool: argv.mode === 'production' ? false : 'eval-source-map',
   plugins,
   output: {
     clean: true,
     path: path.resolve(__dirname, 'build'),
-    assetModuleFilename: 'assets/[hash][ext]',
+    assetModuleFilename: 'assets/[fullhash:12][ext]',
-    filename: 'main.[hash:8].js',
+    filename: 'main.[fullhash:8].js',
   },
   devServer: {
     open: true,
@@ -77,7 +77,10 @@ module.exports = {
       },
       {
         test: /\.(png|svg|jpg|gif)$/,
-        use: ["file-loader"]
+        loader: 'file-loader',
+        options: {
+          outputPath: 'assets',
+        },
       }
     ]
   },
@@ -95,4 +98,4 @@ module.exports = {
       "fs": false
     }
   },
-};
+});