Refactor SSR to improve initial subapp loading performance (electrode…

…-io#1717) * Refactoring to improve performance * fixing lint error * fix ssr for prod
yishengjiang99 · Aug 20, 2020 · 2f1a0e9 · 2f1a0e9
1 parent f97b139
commit 2f1a0e9
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 33 deletions.
diff --git a/packages/subapp-util/lib/index.js b/packages/subapp-util/lib/index.js
@@ -285,7 +285,7 @@ function loadSubAppByName(name) {
   return container[name];
 }
 
-function loadSubAppServerByName(name) {
+function loadSubAppServerByName(name, serverSideRendering) {
   const manifest = subAppManifest()[name];
   const { subAppDir, serverEntry } = manifest;
 
@@ -295,16 +295,16 @@ function loadSubAppServerByName(name) {
     );
   } else if (serverEntry === false) {
     return {};
-  }
-
-  // generate a server from subapp's main file
-  const subapp = es6Require(
-    manifest.module ? manifest.entry : Path.resolve(appSrcDir(), subAppDir, manifest.entry)
-  );
+  } else if (serverSideRendering) {
+    const subapp = es6Require(
+      manifest.module ? manifest.entry : Path.resolve(appSrcDir(), subAppDir, manifest.entry)
+    );
 
-  return {
-    StartComponent: subapp.Component
-  };
+    return {
+      StartComponent: subapp.Component
+    };
+  }
+  return {};
 }
 
 function refreshSubAppByName(name) {

diff --git a/packages/subapp-util/test/data/subapp4/src/index.js b/packages/subapp-util/test/data/subapp4/src/index.js
@@ -0,0 +1,3 @@
+module.exports = {
+  foo: () => 123
+};
diff --git a/packages/subapp-util/test/data/subapp4/src/server.js b/packages/subapp-util/test/data/subapp4/src/server.js
@@ -0,0 +1,4 @@
+module.exports = {
+  name: "subapp1-server",
+  listen: (port = 8080) => `server is listening on port: ${port}`
+};
diff --git a/packages/subapp-util/test/data/subapp4/src/subapp-conf.js b/packages/subapp-util/test/data/subapp4/src/subapp-conf.js
@@ -0,0 +1,6 @@
+module.exports = {
+  name: "Subapp4",
+  subAppDir: "Subapp4/src",
+  entry: "index.js",
+  serverEntry: false
+};
diff --git a/packages/subapp-util/test/data/subapp4/src/subapp-manifest.js b/packages/subapp-util/test/data/subapp4/src/subapp-manifest.js
@@ -0,0 +1,6 @@
+module.exports = {
+  name: "subapp4",
+  subAppDir: "subapp4/src",
+  entry: "index.js",
+  serverEntry: false
+};
diff --git a/packages/subapp-util/test/spec/index.spec.js b/packages/subapp-util/test/spec/index.spec.js
@@ -121,7 +121,7 @@ describe("subapp-util", function() {
       process.env.APP_SRC_DIR = "test/data";
       const subapp = getAllSubAppManifest();
       expect(subapp).to.exist;
-      expect(Object.keys(subapp).length).to.equal(4);
+      expect(Object.keys(subapp).length).to.equal(5);
     });
   });
 
@@ -209,13 +209,13 @@ describe("subapp-util", function() {
     });
 
     it("should generate `serverEntry` given in subapp", () => {
-      const server = loadSubAppServerByName("Entry");
+      const server = loadSubAppServerByName("Entry", true);
       expect(server).to.have.property("StartComponent");
     });
 
     it("should return empty `serverEntry` if subapp manifest sets serverEntry to false", () => {
-      const server = loadSubAppServerByName("Entry");
-      expect(server).to.have.property("StartComponent");
+      const server = loadSubAppServerByName("subapp4");
+      expect(server).to.not.have.property("StartComponent");
     });
 
     it("should not load subapp server by name if NODE_ENV = production but lib does not exist", () => {

diff --git a/packages/subapp-web/lib/init.js b/packages/subapp-web/lib/init.js
@@ -65,8 +65,11 @@ ${inlineRuntimeJS}
 </script>`;
 
   // check if any subapp has server side code with initialize method and load them
-  const subAppServers = Object.keys(subappUtil.getAllSubAppManifest())
-    .map(name => subappUtil.loadSubAppServerByName(name))
+  const { subApps } = setupContext.routeOptions.__internals;
+  const subAppServers = subApps
+    .map(({ subapp }) => {
+      subappUtil.loadSubAppServerByName(subapp.name, false);
+    })
     .filter(x => x && x.initialize);
 
   return {

diff --git a/packages/subapp-web/lib/load.js b/packages/subapp-web/lib/load.js
@@ -139,7 +139,7 @@ Response: ${err || body}`
   //
   const prepareSubAppSplitBundles = async context => {
     const { assets, includedBundles } = context.user;
-    const entryName = subApp.name.toLowerCase();
+    const entryName = name.toLowerCase();
     //
     const entryPoints = assets.entryPoints[entryName];
     const cdnJsBundles = util.getCdnJsBundles(assets, setupContext.routeOptions);
@@ -193,10 +193,9 @@ Response: ${err || body}`
 
   const loadSubApp = () => {
     subApp = loadSubAppByName(name);
-    subAppServer = loadSubAppServerByName(name);
+    subAppServer = loadSubAppServerByName(name, true);
   };
 
-  loadSubApp();
   prepareSubAppJsBundle();
 
   const verifyUseStream = props => {
@@ -221,10 +220,6 @@ Response: ${err || body}`
 
       context.user.numOfSubapps = context.user.numOfSubapps || 0;
 
-      if (request.app.webpackDev && subAppLoadTime < request.app.webpackDev.compileTime) {
-        subAppLoadTime = request.app.webpackDev.compileTime;
-        loadSubApp();
-      }
 
       let { group = "_" } = props;
       group = [].concat(group);
@@ -337,14 +332,6 @@ ${stack}`,
       };
 
       const processSubapp = async () => {
-        const ref = {
-          context,
-          subApp,
-          subAppServer,
-          options: props,
-          ssrGroups
-        };
-
         context.user.numOfSubapps++;
         const { bundles, scripts, preLoads } = await prepareSubAppSplitBundles(context);
         outputSpot.add(`${comment}`);
@@ -363,6 +350,21 @@ ${stack}`,
           if (!context.user[`prepare-grp-${props.group}`]) {
             context.user[`prepare-grp-${props.group}`] = Date.now();
           }
+
+          if (
+            !request.app.webpackDev ||
+            (request.app.webpackDev && subAppLoadTime < request.app.webpackDev.compileTime)
+          ) {
+            subAppLoadTime = _.get(request, "app.webpackDev.compileTime", 0);
+            loadSubApp();
+          }
+          const ref = {
+            context,
+            subApp,
+            subAppServer,
+            options: props,
+            ssrGroups
+          };
           const lib = (ssrInfo.lib = util.getFramework(ref));
           ssrInfo.awaitData = lib.handlePrepare();
 

diff --git a/packages/subapp-web/test/spec/init.spec.js b/packages/subapp-web/test/spec/init.spec.js
@@ -20,7 +20,15 @@ describe("init", function () {
 
     const initToken = init({
       routeOptions: {
-        __internals: {},
+        __internals: {
+          subApps: [
+            {
+              subapp: {
+                name: "mainbody"
+              }
+            }
+          ]
+        },
         cdn: {},
         stats: Path.join(__dirname, "../data/prod-stats.json")
       }
@@ -41,7 +49,15 @@ describe("init", function () {
 
     const initToken = init({
       routeOptions: {
-        __internals: {},
+        __internals: {
+          subApps: [
+            {
+              subapp: {
+                name: "mainbody"
+              }
+            }
+          ]
+        },
         cdn: {},
         prodBundleBase: "/js",
         stats: Path.join(__dirname, "../data/prod-stats.json")