Add minification

frontend/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "start": "webpack-dev-server --mode development",
     "lint": "eslint --fix \"src/**/*.ts\" && prettier --write \"src/**/*.ts\"",
-    "build": "webpack --mode production && find dist -type f -not -name '*.html' | xargs rm",
+    "build": "webpack --mode production",
     "try-build": "npm run build && cd dist && python3 -m http.server 8080",
     "initialize": "npm install"
   },
@@ -18,11 +18,9 @@
     }
   },
   "devDependencies": {
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
-    "terser-webpack-plugin": "^2.3.5",
-    "webpack-dev-server": "^3.10.3",
+    "terser-webpack-plugin": "^4.2.2",
     "clean-webpack-plugin": "^3.0.0",
+    "esbuild-loader": "^2.4.0",
     "html-webpack-inline-source-plugin": "0.0.10",
     "html-webpack-plugin": "^3.2.0",
     "image-webpack-loader": "^6.0.0",
@@ -34,7 +32,10 @@
     "sass": "^1.26.3",
     "sass-loader": "^9.0.2",
     "svg-url-loader": "^6.0.0",
-    "ts-loader": "^8.0.1"
+    "webpack": "^4.43.0",
+    "webpack-bundle-analyzer": "^3.9.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
   },
   "browserslist": [
     "defaults"
@@ -42,4 +43,4 @@
   "sideEffects": [
     "*.scss"
   ]
-}
+}

frontend/src/scripts/game.ts

@@ -56,7 +56,7 @@ export class Game {
 
     this.socket.on(TransportEvents.ServerToPlayer, (serialized: string) => {
       const command = deserialize(serialized);
-      console.log(command);
+      //console.log(command);
       this.gameObjects.sendCommand(command);
     });
 

frontend/src/scripts/objects/game-object-container.ts

@@ -38,14 +38,15 @@ export class GameObjectContainer extends CommandReceiver {
     [DeleteObjectsCommand.type]: (c: DeleteObjectsCommand) =>
       c.ids.forEach((id: Id) => this.objects.delete(id)),
 
-    [UpdateObjectsCommand.type]: (c: UpdateObjectsCommand) =>
+    [UpdateObjectsCommand.type]: (c: UpdateObjectsCommand) => {
       c.objects.forEach((o) => {
         this.objects.delete(o.id);
         this.addObject(o);
         if (o.id === this.player.id) {
           this.player = o as CharacterView;
         }
-      }),
+      });
+    },
   };
 
   protected defaultCommandExecutor(c: Command) {

frontend/tsconfig.json

@@ -1,18 +0,0 @@
-{
-  "compilerOptions": {
-    "outDir": "./dist/",
-    "sourceMap": true,
-    "noImplicitAny": false,
-    "target": "es6",
-    "downlevelIteration": true,
-    "allowJs": true,
-    "experimentalDecorators": true,
-    "allowSyntheticDefaultImports": true,
-    "moduleResolution": "Node",
-    "module": "es6",
-    "lib": [
-      "es2015",
-      "dom"
-    ]
-  }
-}

frontend/webpack.config.js

@@ -1,28 +1,29 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const TerserJSPlugin = require('terser-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
 const Sass = require('sass');
+const TerserJSPlugin = require('terser-webpack-plugin');
+const { ESBuildPlugin } = require('esbuild-loader');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 
 const PATHS = {
   entryPoint: path.resolve(__dirname, 'src/index.ts'),
   bundles: path.resolve(__dirname, 'dist'),
 };
 
-module.exports = {
+module.exports = (env, argv) => ({
   entry: {
     index: PATHS.entryPoint,
   },
   target: 'web',
   output: {
-    filename: '[name].[contenthash].js',
+    filename: '[name].js',
     path: PATHS.bundles,
   },
-
-  devtool: 'source-map',
+  devtool: argv.mode === 'development' ? 'source-map' : false,
   devServer: {
     host: '0.0.0.0',
     disableHostCheck: true,
@@ -31,19 +32,20 @@ module.exports = {
     },
   },
   optimization: {
-    minimize: false,
-    usedExports: true,
+    minimize: argv.mode !== 'development',
     minimizer: [
       new TerserJSPlugin({
-        sourceMap: true,
-        cache: true,
-        test: /\.ts$/,
+        sourceMap: false,
+        test: /\.js$/,
+        terserOptions: {
+          keep_classnames: true,
+        }
       }),
       new OptimizeCSSAssetsPlugin({}),
     ],
   },
   plugins: [
-    new CleanWebpackPlugin(),
+    new ESBuildPlugin(),
     new HtmlWebpackPlugin({
       xhtml: true,
       template: './src/index.html',
@@ -53,14 +55,18 @@ module.exports = {
         removeRedundantAttributes: true,
         removeScriptTypeAttributes: true,
         removeStyleLinkTypeAttributes: true,
-        useShortDoctype: true,
+        useShortDoctype: true
       },
       inlineSource: '.(js|css)$',
     }),
     new HtmlWebpackInlineSourcePlugin(),
     new MiniCssExtractPlugin({
-      filename: '[name].[contenthash].css',
-      chunkFilename: '[id].[contenthash].css',
+      filename: '[name].css',
+      chunkFilename: '[id].css',
+    }),
+    new CleanWebpackPlugin({
+      protectWebpackAssets: false,
+      cleanAfterEveryBuildPatterns: ['*.js', '*.css'],
     }),
   ],
   module: {
@@ -98,14 +104,15 @@ module.exports = {
       },
       {
         test: /\.ts$/,
-        use: {
-          loader: 'ts-loader',
-        },
-        exclude: /node_modules/,
+        loader: 'esbuild-loader',
+        options: {
+          loader: 'ts',
+          target: 'es2015',
+        }
       },
     ],
   },
   resolve: {
     extensions: ['.ts', '.js'],
   },
-};
+});