Add minification

backend/package.json

@@ -13,16 +13,16 @@
   "keywords": [],
   "author": "András Schmelczer <andras@schmelczer.dev> (https://schmelczer.dev/)",
   "devDependencies": {
-    "nodemon": "^2.0.4",
-    "concurrently": "^5.3.0",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
-    "terser-webpack-plugin": "^2.3.5",
-    "webpack-dev-server": "^3.10.3",
     "clean-webpack-plugin": "^3.0.0",
+    "concurrently": "^5.3.0",
+    "esbuild-loader": "^2.4.0",
+    "nodemon": "^2.0.4",
     "raw-loader": "^4.0.1",
     "resolve-url-loader": "^3.1.1",
-    "ts-loader": "^8.0.1"
+    "terser-webpack-plugin": "^2.3.5",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.10.3"
   },
   "dependencies": {
     "cors": "^2.8.5",

backend/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "compilerOptions": {
-    "outDir": "./dist/",
-    "sourceMap": true,
-    "noImplicitAny": false,
-    "target": "es5",
-    "downlevelIteration": true,
-    "allowJs": true,
-    "experimentalDecorators": true,
-    "moduleResolution": "node",
-    "module": "commonjs",
-    "esModuleInterop": true
-  }
-}

backend/webpack.config.js

@@ -1,13 +1,15 @@
 const path = require('path');
-const TerserJSPlugin = require('terser-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const nodeExternals = require('webpack-node-externals');
+const { ESBuildPlugin } = require('esbuild-loader');
+const TerserJSPlugin = require('terser-webpack-plugin');
 
 const PATHS = {
   entryPoint: path.resolve(__dirname, 'src/main.ts'),
   bundles: path.resolve(__dirname, 'dist'),
 };
 
-module.exports = {
+module.exports = (env, argv) => ({
   entry: {
     main: [PATHS.entryPoint],
   },
@@ -21,21 +23,29 @@ module.exports = {
     filename: '[name].js',
     path: PATHS.bundles,
   },
-  devtool: 'source-map',
+  devtool: argv.mode === 'development' ? 'source-map' : false,
   watchOptions: {
     poll: true
   },
   optimization: {
-    minimize: true,
-    usedExports: true,
+    minimize: argv.mode !== 'development',
     minimizer: [
       new TerserJSPlugin({
-        sourceMap: true,
-        cache: true,
-        test: /\.ts$/,
+        sourceMap: false,
+        test: /\.js$/,
+        terserOptions: {
+          keep_classnames: true,
+        }
       }),
     ],
   },
+  plugins: [
+    new ESBuildPlugin(),
+    new CleanWebpackPlugin({
+      protectWebpackAssets: false,
+      cleanAfterEveryBuildPatterns: [],
+    }),
+  ],
   module: {
     rules: [
       {
@@ -50,14 +60,15 @@ module.exports = {
       },
       {
         test: /\.ts$/,
-        use: {
-          loader: 'ts-loader',
-        },
-        exclude: /node_modules/,
+        loader: 'esbuild-loader',
+        options: {
+          loader: 'ts',
+          target: 'es2015',
+        }
       },
     ],
   },
   resolve: {
     extensions: ['.ts', '.js'],
   },
-};
+});

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'],
   },
-};
+});

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "scripts": {
     "start": "lerna run --parallel start",
-    "try-build": "lerna run --parallel try-build",
+    "try-build": "lerna run --parallel try-build-before && lerna run --parallel try-build",
     "build": "lerna run build",
     "initialize": "lerna run initialize"
   },

shared/package.json

@@ -2,9 +2,19 @@
   "name": "shared",
   "private": true,
   "description": "Shared library between backend and frontend",
-  "main": "src/main.ts",
+  "main": "lib/main.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "webpack --mode development --watch",
+    "lint": "eslint --fix \"src/**/*.ts\" && prettier --write \"src/**/*.ts\"",
+    "build": "webpack --mode production",
+    "try-build-before": "npm run build",
     "initialize": "npm install"
+  },
+  "devDependencies": {
+    "clean-webpack-plugin": "^3.0.0",
+    "terser-webpack-plugin": "^2.3.8",
+    "ts-loader": "^8.0.3",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11"
   }
 }

shared/src/commands/types/step.ts

@@ -1,7 +1,7 @@
 import { Command } from '../command';
 
 export class StepCommand extends Command {
-  public constructor(public readonly deltaTimeInMiliseconds: DOMHighResTimeStamp) {
+  public constructor(public readonly deltaTimeInMiliseconds: number) {
     super();
   }
 }

shared/src/transport/serialization/serialize.ts

@@ -1,4 +1,4 @@
-export const serialize = (object): string => {
+export const serialize = (object: any): string => {
   return JSON.stringify(object, (_, value) => {
     if (value?.__serializable_type) {
       return [value.__serializable_type, ...value.toArray()];

shared/tsconfig.json

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

shared/webpack.config.js

@@ -0,0 +1,48 @@
+const path = require('path');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+
+const PATHS = {
+  entryPoint: path.resolve(__dirname, 'src/main.ts'),
+  bundles: path.resolve(__dirname, 'lib'),
+};
+
+module.exports = (env, argv) => ({
+  entry: {
+    main: PATHS.entryPoint,
+  },
+  target: 'node',
+  output: {
+    filename: '[name].js',
+    path: PATHS.bundles,
+    libraryTarget: 'umd',
+    umdNamedDefine: true,
+  },
+  devtool: argv.mode === 'development' ? 'source-map' : false,
+  watchOptions: {
+    poll: true,
+    ignored: /node_modules/
+  },
+  optimization: {
+    minimize: false,
+  },
+  plugins: [
+    new CleanWebpackPlugin({
+      protectWebpackAssets: false,
+      cleanAfterEveryBuildPatterns: [],
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        use: {
+          loader: 'ts-loader',
+        },
+        exclude: /node_modules/,
+      }
+    ],
+  },
+  resolve: {
+    extensions: ['.ts', '.js'],
+  },
+});