From 759ba51e745409491397a43191c1c9c3272714f2 Mon Sep 17 00:00:00 2001
From: Joel Chen <xchen@walmartlabs.com>
Date: Mon, 13 Jan 2020 20:37:47 -0800
Subject: [PATCH] optimize webpack runtime as a single chunk for subapps

---
 .../config/webpack/partial/subapp-chunks.js           |  1 +
 packages/subapp-web/lib/util.js                       | 11 +++++++++--
 packages/subapp-web/src/subapp-web.js                 |  2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/electrode-archetype-react-app-dev/config/webpack/partial/subapp-chunks.js b/packages/electrode-archetype-react-app-dev/config/webpack/partial/subapp-chunks.js
index de3282112..d35013368 100644
--- a/packages/electrode-archetype-react-app-dev/config/webpack/partial/subapp-chunks.js
+++ b/packages/electrode-archetype-react-app-dev/config/webpack/partial/subapp-chunks.js
@@ -27,6 +27,7 @@ if (AppMode.hasSubApps) {
   // The filename has the pattern of hex-sum.bundle1~bundle2~bundle#.js
   // https://webpack.js.org/plugins/split-chunks-plugin/
   config.optimization = {
+    runtimeChunk: "single",
     splitChunks: {
       chunks: "all",
       minSize: 30 * 1024,
diff --git a/packages/subapp-web/lib/util.js b/packages/subapp-web/lib/util.js
index 0c2db9360..0b82a636b 100644
--- a/packages/subapp-web/lib/util.js
+++ b/packages/subapp-web/lib/util.js
@@ -35,6 +35,13 @@ const utils = {
     // find entry point
     const entryPoints = assets.entryPoints[entryName];
     assert(entryPoints, `subapp-web: no entry point found for ${name}`);
+
+    // without webpack optimization.runtimeChunk the entry point bundles are generated
+    // as <entryName>.bundle.js, like header.bundle.js
+    // but with runtimeChunk, the entry point are generated with hash
+    // as <hash>.<entryName>.js
+    // So check both cases.
+    const matchEntry = x => x === `${entryName}.bundle.js` || x.endsWith(`.${entryName}.js`);
     // map all IDs to actual assets
     const bundleAssets = entryPoints
       .map(id => {
@@ -42,8 +49,8 @@ const utils = {
         const js = assets.chunksById.js[id];
         // Only use IDs that has bundle with name that starts with entry's name
         if (Array.isArray(js)) {
-          bundleName = js.find(x => x.startsWith(entryName));
-        } else if (js.startsWith(entryName)) {
+          bundleName = js.find(matchEntry);
+        } else if (matchEntry(js)) {
           bundleName = js;
         }
         return bundleName && assets.js.find(x => x.name === bundleName);
diff --git a/packages/subapp-web/src/subapp-web.js b/packages/subapp-web/src/subapp-web.js
index bc32debb4..422bd6773 100644
--- a/packages/subapp-web/src/subapp-web.js
+++ b/packages/subapp-web/src/subapp-web.js
@@ -53,7 +53,7 @@ function loadSubAppBundles(names, done) {
       return chunkIds.reduce((a2, id) => {
         // chunk could have multiple assets
         return [].concat(ba.jsChunksById[id]).reduce((a3, asset) => {
-          return a3.concat({ name, id, asset });
+          return asset ? a3.concat({ name, id, asset }) : a3;
         }, a2);
       }, a);
     }, [])