Add compression

packages/webapp/package.json

@@ -15,15 +15,12 @@
     "license": "MIT",
     "private": false,
     "devDependencies": {
-        "@babel/preset-env": "^7.12.7",
-        "@babel/preset-react": "^7.12.7",
         "@formatjs/cli": "^2.13.15",
         "@typescript-eslint/eslint-plugin": "^4.8.1",
         "@typescript-eslint/parser": "^4.8.1",
-        "babel-loader": "^8.2.2",
-        "babel-plugin-transform-imports": "^2.0.0",
         "brotli-webpack-plugin": "^1.1.0",
         "clean-webpack-plugin": "^3.0.0",
+        "compression-webpack-plugin": "^7.1.2",
         "copy-webpack-plugin": "^7.0.0",
         "css-loader": "^5.0.1",
         "eslint": "^7.14.0",

packages/webapp/src/components/maps-page/account-menu/account-info-dialog/index.tsx

@@ -1,4 +1,4 @@
-import { FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel, Switch } from "@material-ui/core";
+import { FormControl, FormControlLabel, FormGroup, Switch } from "@material-ui/core";
 import React, { useEffect } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useMutation, useQueryClient } from "react-query";

packages/webapp/tsconfig.json

@@ -4,7 +4,7 @@
       "sourceMap": true,
       "noImplicitAny": false,
       "module": "commonjs",
-      "target": "es5",
+      "target": "es6",
       "jsx": "react",
       "allowJs": true,
       "esModuleInterop": true

packages/webapp/webpack.common.js

@@ -1,7 +1,7 @@
 const path = require('path');
-
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
+const CompressionPlugin = require('compression-webpack-plugin');
 
 
 module.exports = {
@@ -29,10 +29,6 @@ module.exports = {
             },
         ]
     },
-    output: {
-        filename: 'bundle.js',
-        path: path.resolve(__dirname, 'dist')
-    },
     plugins: [
         new CleanWebpackPlugin(),
         new CopyWebpackPlugin({
@@ -45,7 +41,7 @@ module.exports = {
                     ]
                 }
             }]
-        })
-
+        }),
+        new CompressionPlugin()
     ]
 }

packages/webapp/webpack.dev.js

@@ -17,6 +17,10 @@ module.exports = merge(common, {
       ]
     }
   },
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist')
+  },
   plugins: [
     new HtmlWebpackPlugin({
       template: path.join(__dirname, 'public/index.html'),

packages/webapp/webpack.prod.js

@@ -1,11 +1,31 @@
 const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
+const path = require('path');
 
 module.exports = merge(common, {
   mode: 'production',
   devtool: 'source-map',
+  output: {
+    filename: '[name].bundle.js',
+    path: path.resolve(__dirname, 'dist')
+  },
   optimization: {
     minimize: true,
-    usedExports: true
-  },
+    usedExports: true,
+    splitChunks: {
+      cacheGroups: {
+        vendors: {
+          test: /node_modules\/(?!antd\/).*/,
+          name: "vendors",
+          chunks: "all",
+        },
+        // This can be your own design library.
+        antd: {
+          test: /node_modules\/(antd\/).*/,
+          name: "antd",
+          chunks: "all",
+        },
+      },
+    }
+  }
 });