improve webpack-dev-server performance

package.json

@@ -6,7 +6,7 @@
   ],
   "scripts": {
     "build": "webpack --mode=development --config=scm-ui/scripts/webpack.config.js",
-    "serve": "webpack-dev-server --config=scm-ui/scripts/webpack.config.js"
+    "serve": "webpack-dev-server --mode=development --config=scm-ui/scripts/webpack.config.js"
   },
   "devDependencies": {
     "@babel/core": "^7.6.2",
@@ -22,8 +22,10 @@
     "node-sass": "^4.12.0",
     "sass-loader": "^8.0.0",
     "script-loader": "^0.7.2",
+    "speed-measure-webpack-plugin": "^1.3.1",
     "style-loader": "^1.0.0",
     "terser-webpack-plugin": "^2.1.2",
+    "thread-loader": "^2.1.3",
     "webpack": "^4.41.0",
     "webpack-cli": "^3.3.9",
     "webpack-dev-server": "^3.8.2"

scm-ui/scripts/webpack.config.js

@@ -10,7 +10,7 @@ module.exports = {
       "./ui-webapp/src/index.js"
     ]
   },
-  devtool: "source-map",
+  devtool: "cheap-module-eval-source-map",
   target: "web",
   node: {
     fs: "empty",
@@ -27,8 +27,10 @@ module.exports = {
       },
       {
         test: /\.(js|jsx)$/,
-        // exclude: /node_modules/,
-        use: {
+        exclude: /node_modules/,
+        use: [{
+          loader: "thread-loader"
+        }, {
           loader: "babel-loader",
           options: {
             presets: [
@@ -38,7 +40,7 @@ module.exports = {
             ],
             plugins: ["@babel/plugin-proposal-class-properties"]
           }
-        }
+        }]
       },
       {
         test: /\.(css|scss|sass)$/i,
@@ -62,8 +64,8 @@ module.exports = {
     filename: "[name].bundle.js"
   },
   devServer: {
-    contentBase: path.join(__dirname, '..', "ui-webapp", "public"),
-    compress: true,
+    contentBase: path.join(__dirname, "..", "ui-webapp", "public"),
+    compress: false,
     historyApiFallback: true,
     overlay: true,
     port: 3000,
@@ -71,12 +73,25 @@ module.exports = {
       app.use(createContextPathMiddleware("/scm"));
     },
     after: function(app) {
-      const templatePath = path.join(__dirname, '..', "ui-webapp", "public", "index.mustache");
+      const templatePath = path.join(__dirname, "..", "ui-webapp", "public", "index.mustache");
       const renderParams = {
         contextPath: "/scm"
       };
       app.use(createIndexMiddleware(templatePath, renderParams));
     },
-    publicPath: '/assets/'
+    publicPath: "/assets/"
+  },
+  optimization: {
+    runtimeChunk: "single",
+    splitChunks: {
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name: "vendors",
+          enforce: true,
+          chunks: "all"
+        }
+      }
+    }
   }
 };

scm-ui/ui-webapp/public/index.mustache

@@ -34,6 +34,8 @@
     <script>
       window.ctxPath = "{{ contextPath }}";
     </script>
+    <script src="{{ contextPath }}/assets/runtime.bundle.js"></script>
+    <script src="{{ contextPath }}/assets/vendors.bundle.js"></script>
     <script src="{{ contextPath }}/assets/webapp.bundle.js"></script>
 
     {{#liveReloadURL}}

yarn.lock

@@ -6221,12 +6221,12 @@ load-json-file@^4.0.0:
     pify "^3.0.0"
     strip-bom "^3.0.0"
 
-loader-runner@^2.4.0:
+loader-runner@^2.3.1, loader-runner@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
   integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
 
-loader-utils@1.2.3, loader-utils@^1.0.2, loader-utils@^1.2.3:
+loader-utils@1.2.3, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
   integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
@@ -9260,6 +9260,13 @@ spdy@^4.0.1:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
+speed-measure-webpack-plugin@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/speed-measure-webpack-plugin/-/speed-measure-webpack-plugin-1.3.1.tgz#69840a5cdc08b4638697dac7db037f595d7f36a0"
+  integrity sha512-qVIkJvbtS9j/UeZumbdfz0vg+QfG/zxonAjzefZrqzkr7xOncLVXkeGbTpzd1gjCBM4PmVNkWlkeTVhgskAGSQ==
+  dependencies:
+    chalk "^2.0.1"
+
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@@ -9695,6 +9702,15 @@ theming@^1.3.0:
     is-plain-object "^2.0.1"
     prop-types "^15.5.8"
 
+thread-loader@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/thread-loader/-/thread-loader-2.1.3.tgz#cbd2c139fc2b2de6e9d28f62286ab770c1acbdda"
+  integrity sha512-wNrVKH2Lcf8ZrWxDF/khdlLlsTMczdcwPA9VEK4c2exlEPynYWxi9op3nPTo5lAnDIkE0rQEB3VBP+4Zncc9Hg==
+  dependencies:
+    loader-runner "^2.3.1"
+    loader-utils "^1.1.0"
+    neo-async "^2.6.0"
+
 throat@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"