✨ support prefetch all for hybrid apps architecture (#140)

umijs · Nov 8, 2019 · d3b912a · d3b912a
1 parent a6a1539
commit d3b912a
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -7,7 +7,7 @@ import { importEntry } from 'import-html-entry';
 import { isFunction } from 'lodash';
 import { registerApplication, start as startSpa } from 'single-spa';
 import { Fetch, RegistrableApp, StartOpts } from './interfaces';
-import { prefetchAfterFirstMounted } from './prefetch';
+import { prefetchAfterFirstMounted, prefetchAll } from './prefetch';
 import { genSandbox } from './sandbox';
 
 declare global {
@@ -197,8 +197,17 @@ export * from './interfaces';
 export function start(opts: StartOpts = {}) {
   const { prefetch = true, jsSandbox = true, singular = true, fetch } = opts;
 
-  if (prefetch) {
-    prefetchAfterFirstMounted(microApps, fetch);
+  switch (prefetch) {
+    case true:
+      prefetchAfterFirstMounted(microApps, fetch);
+      break;
+
+    case 'all':
+      prefetchAll(microApps, fetch);
+      break;
+
+    default:
+      break;
   }
 
   if (jsSandbox) {

diff --git a/src/interfaces.ts b/src/interfaces.ts
@@ -21,7 +21,7 @@ export type RegistrableApp<T extends object = {}> = {
 };
 
 export type StartOpts = {
-  prefetch?: boolean;
+  prefetch?: boolean | 'all';
   jsSandbox?: boolean;
   singular?: boolean | ((app: RegistrableApp<any>) => Promise<boolean>);
   fetch?: Fetch;

diff --git a/src/prefetch.ts b/src/prefetch.ts
@@ -50,11 +50,24 @@ export function prefetchAfterFirstMounted(apps: RegistrableApp[], fetch?: Fetch)
       const notMountedApps = apps.filter(app => mountedApps.indexOf(app.name) === -1);
 
       if (process.env.NODE_ENV === 'development') {
-        console.log('prefetch starting...', notMountedApps);
+        console.log(`prefetch starting after ${mountedApps} mounted...`, notMountedApps);
       }
 
       notMountedApps.forEach(app => prefetch(app.entry, fetch));
     },
     { once: true },
   );
 }
+
+export function prefetchAll(apps: RegistrableApp[], fetch?: Fetch) {
+  window.addEventListener(
+    'single-spa:no-app-change',
+    () => {
+      if (process.env.NODE_ENV === 'development') {
+        console.log('prefetch starting for all assets...', apps);
+      }
+      apps.forEach(app => prefetch(app.entry, fetch));
+    },
+    { once: true },
+  );
+}