✨ add performance timing log

src/loader.ts

@@ -10,7 +10,15 @@ import getAddOns from './addons';
 import { getMicroAppStateActions } from './globalState';
 import { FrameworkConfiguration, FrameworkLifeCycles, HTMLContentRender, LifeCycleFn, LoadableApp } from './interfaces';
 import { createSandbox } from './sandbox';
-import { Deferred, getDefaultTplWrapper, getWrapperId, toArray, validateExportLifecycle } from './utils';
+import {
+  Deferred,
+  getDefaultTplWrapper,
+  getWrapperId,
+  performanceMark,
+  performanceMeasure,
+  toArray,
+  validateExportLifecycle,
+} from './utils';
 
 function assertElementExist(element: Element | null | undefined, msg?: string) {
   if (!element) {
@@ -194,6 +202,13 @@ export async function loadApp<T extends object>(
   lifeCycles?: FrameworkLifeCycles<T>,
 ): Promise<ParcelConfigObject> {
   const { entry, name: appName } = app;
+  const appInstanceId = `${appName}_${+new Date()}`;
+
+  const markName = `[qiankun] App ${appInstanceId} Loading`;
+  if (process.env.NODE_ENV === 'development') {
+    performanceMark(markName);
+  }
+
   const { singular = false, sandbox = true, ...importEntryOpts } = configuration;
 
   // get the entry html content and script executor
@@ -206,8 +221,6 @@ export async function loadApp<T extends object>(
     await (prevAppUnmountedDeferred && prevAppUnmountedDeferred.promise);
   }
 
-  const appInstanceId = `${appName}_${+new Date()}`;
-
   const strictStyleIsolation = typeof sandbox === 'object' && !!sandbox.strictStyleIsolation;
 
   const appContent = getDefaultTplWrapper(appInstanceId)(template);
@@ -290,6 +303,12 @@ export async function loadApp<T extends object>(
           prevAppUnmountedDeferred = new Deferred<void>();
         }
       },
+      async () => {
+        if (process.env.NODE_ENV === 'development') {
+          const measureName = `[qiankun] App ${appInstanceId} Loading Consuming`;
+          performanceMeasure(measureName, markName);
+        }
+      },
     ],
     unmount: [
       async () => execHooksChain(toArray(beforeUnmount), app),

src/utils.ts

@@ -55,3 +55,24 @@ class Deferred<T> {
 }
 
 export { Deferred };
+
+const supportsUserTiming =
+  typeof performance !== 'undefined' &&
+  typeof performance.mark === 'function' &&
+  typeof performance.clearMarks === 'function' &&
+  typeof performance.measure === 'function' &&
+  typeof performance.clearMeasures === 'function';
+
+export function performanceMark(markName: string) {
+  if (supportsUserTiming) {
+    performance.mark(markName);
+  }
+}
+
+export function performanceMeasure(measureName: string, markName: string) {
+  if (supportsUserTiming) {
+    performance.measure(measureName, markName);
+    performance.clearMarks(markName);
+    performance.clearMeasures(measureName);
+  }
+}